Jquery下拉切换问题

Question

http://jsfiddle.net/dyHD7/

基本上我试图这样做，以便当用户将鼠标悬停在文本上时，它会切换到下拉列表，当用户选择一个选项或悬停在下拉列表外时，它会切换回文本。任何想法如何实现这一目标？

Answer 1

您可以使用方法change（），使用更改后的值更新status_txt。

HTML

 <div class="sudiptaDD">
        <div class="status_txt" style="display: block;">
                <span>Unpaid</span>
        </div>
        <div style="display:none;" class="status_dd">
            <select name="status[]">
                <option selected="" value="0">Unpaid</option> 
                <option value="Paid">Paid</option>
                <option value="Cancelled">Cancelled</option>
                <option value="Void">Void</option>
            </select>
    </div>
</div>​

JQuery的

$(".sudiptaDD").live("mouseenter",function(){
    $(".status_txt",this).slideUp(200);
$(".status_dd",this).slideDown(200);
$('select').change(function(){
        var value = $(this).val();             
        $('.status_txt span').html(value);
    }); 

}).live("mouseleave",function(){
    $(".status_dd",this).slideUp(200);
    $(".status_txt",this).slideDown(200);
 });​

Fiddle

Answer 2

检查一下这不是很顺利，但我觉得按你的意愿工作

http://jsfiddle.net/dk76h/

单击文本，当下拉列表将使用键盘箭头键选择值并按Enter键，然后从中删除鼠标。

我知道这很乏味但是如果你能改进它就给出链接