jquery - 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);
 });​

小提琴

Answer 2

检查这个它不是很顺利，但我认为你想要的工作

http://jsfiddle.net/dk76h/

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

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