发表新帖
发表新帖

How do you select a particular option in a SELECT element in jQuery?

前端 未结
关注
21 1771
Happy的楠姐
Happy的楠姐 2020-11-22 10:55

If you know the Index, Value or Text. also if you don\'t have an ID for a direct reference.

This, this and this are all helpful answers.

Example markup

相关标签:
21条回答
  • 半阙折子戏
    2020-11-22 11:23 
    $('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

    or

    $('#select option[value="myValue"]').prop("selected",true).trigger("change");
    0 讨论(0)
  • 野性不改
    2020-11-22 11:25

    You can just use val() method:

    $('select').val('the_value');
    0 讨论(0)
  • 春和景丽
    2020-11-22 11:25

    Answering my own question for documentation. I'm sure there are other ways to accomplish this, but this works and this code is tested.

    <html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>
    0 讨论(0)
  • 一生所求
    2020-11-22 11:26

    There are a number of ways to do this, but the cleanest approach has been lost among the top answers and loads of arguments over val(). Also some methods changed as of jQuery 1.6, so this needs an update.

    For the following examples I will assume the variable $select is a jQuery object pointing at the desired <select> tag, e.g. via the following:

    var $select = $('.selDiv .opts');

    Note 1 - use val() for value matches:

    For value matching, using val() is far simpler than using an attribute selector: https://jsfiddle.net/yz7tu49b/6/

    $select.val("SEL2");

    The setter version of .val() is implemented on select tags by setting the selected property of a matching option with the same value, so works just fine on all modern browsers.

    Note 2 - use prop('selected', true):

    If you want to set the selected state of an option directly, you can use prop (not attr) with a boolean parameter (rather than the text value selected):

    e.g. https://jsfiddle.net/yz7tu49b/

    $option.prop('selected', true);  // Will add selected="selected" to the tag

    Note 3 - allow for unknown values:

    If you use val() to select an <option>, but the val is not matched (might happen depending on the source of the values), then "nothing" is selected and $select.val() will return null.

    So, for the example shown, and for the sake of robustness, you could use something like this https://jsfiddle.net/1250Ldqn/:

    var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

    Note 4 - exact text match:

    If you want to match by exact text, you can use a filter with function. e.g. https://jsfiddle.net/yz7tu49b/2/:

    var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

    although if you may have extra whitespace you may want to add a trim to the check as in 

        return $.trim(this.text) == "some value to match";

    Note 5 - match by index

    If you want to match by index just index the children of the select e.g. https://jsfiddle.net/yz7tu49b/3/

    var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

    Although I tend to avoid direct DOM properties in favour of jQuery nowadays, to future-proof code, so that could also be done as https://jsfiddle.net/yz7tu49b/5/:

    var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

    Note 6 - use change() to fire the new selection

    In all the above cases, the change event does not fire. This is by design so that you do not wind up with recursive change events.

    To generate the change event, if required, just add a call to .change() to the jQuery select object. e.g. the very first simplest example becomes https://jsfiddle.net/yz7tu49b/7/

    var $select = $('.selDiv .opts');
$select.val("SEL2").change();

    There are also plenty of other ways to find the elements using attribute selectors, like [value="SEL2"], but you have to remember attribute selectors are relatively slow compared to all these other options.

    0 讨论(0)
  • 逝去的感伤
    2020-11-22 11:26

    Thanks for the question. Hope this piece of code will work for you.

    var val = $("select.opts:visible option:selected ").val();
    0 讨论(0)
  • 执念已碎
    2020-11-22 11:27

    Using jquery-2.1.4, I found the following answer to work for me:

    $('#MySelectionBox').val(123).change();

    If you have a string value try the following:

    $('#MySelectionBox').val("extra thing").change();

    Other examples did not work for me so that's why I'm adding this answer.

    I found the original answer at: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

    0 讨论(0)
 看不清?
提交回复
热议问题