javascript jQuery如何选择第一个非隐藏选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24444264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery how to select the first non-hidden select option
提问by bbonev
The following behaves differently between jQuery 1.9 and 1.10+:
以下在 jQuery 1.9 和 1.10+ 之间的行为有所不同：
<select id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$('#s1 option[value=1]').hide();
$('#s1').val('');
The idea behind this code is to select the first non-hidden option, after hiding some options, including the currently selected one.
这段代码背后的想法是在隐藏一些选项（包括当前选择的选项）之后选择第一个非隐藏选项。
Since jQuery 1.10+ the $('#s1').val('');no longer selects the first non-hidden option, while .val(<some proper value for the particular select box>)works ok.
由于 jQuery 1.10+$('#s1').val('');不再选择第一个非隐藏选项，而.val(<some proper value for the particular select box>)工作正常。
Trying the following approaches does not help because both selectedIndexand .first().val()consider the hidden options:
尝试以下方法没有帮助，因为两者selectedIndex并.first().val()考虑隐藏的选项：
$("#s1").prop("selectedIndex", 0);
$("#s1").prop("selectedIndex", 0);
$('#s1 option').first().prop('selected', true);
$('#s1 option').first().prop('selected', true);
Next thing that comes to mind (also suggested by C-link) also does not work, because the :visibleselector does not work properly for select options.
接下来想到的事情（也由C-link建议）也不起作用，因为:visible选择器对于选择选项无法正常工作。
$('#s1 option:visible').first().prop('selected', true);
$('#s1 option:visible').first().prop('selected', true);
Looking for some generic way (not depending on knowledge of what are the particular values and what options have been hidden) to achieve the same behaviour as $('#s1').val('');in old jQuery.
寻找一些通用方法（不依赖于特定值是什么以及隐藏了哪些选项的知识）来实现与$('#s1').val('');旧 jQuery 中相同的行为。
回答by bbonev
Compiled from everybody else's answers/comments the following:
从其他人的答案/评论中汇编如下：
$('#s1 option').each(function () {
if ($(this).css('display') != 'none') {
$(this).prop("selected", true);
return false;
}
});
回答by israr
Shortly Like this:
就像这样：
$('#s1').find("option:not(:hidden):eq(0)");
回答by p e p
Try this:
试试这个：
<select id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$('#s1 option[value=1]').hide();
var firstVisibleValue = '';
$('#s1').children().each(function(){ //iterate options
//check if option is visible - if not set to display none, which is what `.hide` does.
if($(this).css('display') != 'none'){
firstVisibleValue = $(this).val();
return false; //stop iterating
}
});
$('#s1').val(firstVisibleValue);
回答by Matheus B.
maybe this:
也许这个：
$('#s1').find("option:not([hidden]):eq(0)");
回答by Unknownman
Try this code
试试这个代码
$('#s1 option[value="1"]').hide();
$('#s1').find('option').each(function()
{
if($(this).is(':visible'))
{
$(this).attr("selected","selected");
return false;
}
});
回答by Supratim Samantray
You can easily do this using class
您可以使用 class 轻松完成此操作
$('#s1 option[value=1]').hide();
$('#s1 option[value=1]').addClass('hidden');
$('#s1 option[value=1]').removeClass('visible')
$('#s1').val('');
$('#s1 .visible:first').val();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
<option class="visible" value="1">1</option>
<option class="visible" value="2">2</option>
<option class="visible" value="3">3</option>
</select>