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

Question

The following behaves differently between jQuery 1.9 and 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.

Trying the following approaches does not help because both selectedIndex and .first().val() consider the hidden options:

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

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

Next thing that comes to mind (also suggested by C-link ) also does not work, because the :visible selector does not work properly for select options.

$('#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.

Answer 1

像这样不久：

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

Answer 2

Compiled from everybody else's answers/comments the following:

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

Answer 3

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

Answer 4

Try this code

$('#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

You can easily do this using 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>