在焦点上打开一个html选择选项

Opening a html select option on focus

本文关键字：一个 html 选择 选项 焦点      更新时间：2023-09-26

我问了一个关于如何在onfocus（）上打开HTML选择标记的选项列表的问题。当时它解决了我的问题，但我错过了一个问题，每次打开html选择选项onfocus时，下一个选择选项都会消失。

我找不到这个代码出了什么问题。这里有这个问题的链接jsFiddle。

是的，就是这样

var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
$(x).fadeTo(50,0);

做。它们隐藏下一个选择，因为否则它会显示在展开的选择的顶部。

不过，这根本不是一个好的解决方案。相反，我会使用z索引来防止这种情况发生：

$('select').focus(function(){
    $(this).attr("size",$(this).attr("expandto")).css('z-index',2);        
});
$('select').blur(function(){
    $(this).attr("size",1).css('z-index','1');         
});
$('select').change(function(){
    $(this).attr("size",1).css('z-index','1');
});

使用类而不是内联样式会更好。但我只是把它当作一个示范。

http://jsfiddle.net/PpTeF/1/

只需注释掉fadeTo函数。检查这个http://jsfiddle.net/PpTeF/2/

$(document).ready(function(){
 $('select').focus(function(){
    $(this).attr("size",$(this).attr("expandto"));
    var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
    //$(x).fadeTo(50,0);
 });
 $('select').blur(function(){
    $(this).attr("size",1); 
    var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";       
    //$(x).fadeTo('fast',1.0);
 });
 $('select').change(function(){
    $(this).attr("size",1); 
    var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";       
    //$(x).fadeTo('fast',1.0);            
 }); 
});

干杯！！

相关文章：