Question

以下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('');

此代码背后的想法是在隐藏一些选项（包括当前选择的选项）后选择第一个非隐藏选项。

由于jQuery 1.10+ $('#s1').val('');不再选择第一个非隐藏选项，而.val(<some proper value for the particular select box>)工作正常。

尝试以下方法无济于事，因为selectedIndex和.first().val()都会考虑隐藏的选项：

$("#s1").prop("selectedIndex", 0);

$('#s1 option').first().prop('selected', true);

我想到的下一件事（也由C-link建议）也不起作用，因为:visible选择器对选择选项无法正常工作。

$('#s1 option:visible').first().prop('selected', true);

寻找一些通用方法（不依赖于知道什么是特定值以及隐藏了哪些选项）来实现与旧jQuery中$('#s1').val('');相同的行为。

Answer 1

很快就像这样：

$('#s1').find("option:not(:hidden):eq(0)");

Answer 2

汇编其他人的答案/评论如下：

$('#s1 option').each(function () {
    if ($(this).css('display') != 'none') {
        $(this).prop("selected", true);
        return false;
    }
});

Answer 3

试试这个：

<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);

Answer 4

试试此代码

$('#s1 option[value="1"]').hide();

$('#s1').find('option').each(function()
 {
if($(this).is(':visible'))
{
    $(this).attr("selected","selected");
    return false;
}
 });

Answer 5

也许这个：

$('#s1').find("option:not([hidden]):eq(0)");

Answer 6

您可以使用类

轻松完成此操作

＆＃13;

$('#s1 option[value=1]').hide();
$('#s1 option[value=1]').addClass('hidden');
$('#s1 option[value=1]').removeClass('visible')
$('#s1').val('');
$('#s1 .visible:first').val();

＆＃13;

<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>

＆＃13;

jQuery如何选择第一个非隐藏的选择选项

6 个答案: