CODEWITHSUNDEEP
javascriptjqueryhtml
bbonev
bbonev

Reputation: 1438

jQuery how to select the first non-hidden select option

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.

Upvotes: 17

Views: 20930

Answers (6)

Supratim Samantray
Supratim Samantray

Reputation: 136

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>

Upvotes: 1

israr
israr

Reputation: 1175

Shortly Like this:

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

Upvotes: 13

Matheus B.
Matheus B.

Reputation: 29

maybe this:

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

Upvotes: 2

bbonev
bbonev

Reputation: 1438

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

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

Upvotes: 16

Unknownman
Unknownman

Reputation: 483

Try this code

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

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

Upvotes: -1

p e p
p e p

Reputation: 6674

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

Upvotes: 2

Related Questions