jQuery API

:selected Selector

Categories: Selectors > Form | Selectors > jQuery Extensions

selected selector

version added: 1.0jQuery(':selected')

Description: Selects all elements that are selected.

The :selected selector works for <option> elements. It does not work for checkboxes or radio inputs; use :checked for them.

Additional Notes:

  • Because :selected is a jQuery extension and not part of the CSS specification, queries using :selected cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :selected to select elements, first select the elements using a pure CSS selector, then use .filter(":selected").

Example:

Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <select name="garden" multiple="multiple">

    <option>Flowers</option>
    <option selected="selected">Shrubs</option>
    <option>Trees</option>
    <option selected="selected">Bushes</option>

    <option>Grass</option>
    <option>Dirt</option>
  </select>
  <div></div>
<script>

    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .trigger('change');
</script>

</body>
</html>

Demo:

Support and Contributions

Need help with :selected Selector or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to :selected Selector? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

* All fields are required
  • Ided

    How do you get the value versus the text?

  • Cdundee

    change $(this).text() to $(this).val()

  • http://www.flobi.com/ Flobi

    To set the options, just set the selected attribute to true (or false to unselect). E.g.:

    $(“select[name=foo] option[text=bar]“).attr(“selected”, true);

  • Erik

    Hi. Is there a way of get the select id?

  • Nishant

    New to Jquery here…I would appreciate any help.
    I have created a variable (var ddl = $(“select[id*='ddlStates']“);) and later would like to find the selectedText using the variable (ddl)….So based on my example just needed to find out how to accomplish $(‘ddl:selected’).text()

    Thanks

  • Anonymous

    Not exactly sure what you are trying to achieve but
    var ddl = $(“select[id*='ddlStates']“);
    is selecting all of the options whether they are selected or not.

    $(‘ddl:selected’).text()
    won’t work because :selected only works on elements, and you are trying to do that on a variable it seems.

    I suggest you use
    var ddl = $(“select[id*='ddlStates']“).find(‘:selected’).text();
    or even better
    var ddl = $(“#ddlStates”).find(‘:selected’).text();
    since ids are unique. You can then use
    ddl
    which will have all of the selected text.

    You can follow the above example to seperate the text.

  • Anonymous

    Instead of using .text() use .attr(“id”), taking the example above:
    $(“select”).change(function () {
    var str = “”;
    $(“select option:selected”).each(function () {
    str += $(this).attr(“id”) + ” “;
    });
    $(“div”).text(str);
    })
    .trigger(‘change’);

  • ashu@best

    how to get the value of select option on change becuse i want to use the value of select option on my query.
    for ex in select box the value are 9,18,27 if any one select 9 then 9 product to disply if any one change from 9 to 18 then 18 product shoud display

  • Bob

    List of <option> elements:
    <select name=”blabla”>
    <…> … <option value='10'>foo</option> … <…> etc.
    </select>
    If I try this: $(“select[name='blabla'] option[value='10']“).attr(“selected”, true); it works fine, but not in this case: $(“select[name='blabla'] option[text=foo]“).attr(“selected”, true); Why?

  • Guest

    because it has no text property, try $(“select[name='blabla']).attr(“selected”, true) && $(“select[name='blabla']).val() == “foo” or something similar

  • Anonymous

    I use ajax to call a php db query and use:id: $(‘#id’).val(),name: $(‘#id :selected’).text()to find the value and the text of the selected option.My problem is, I want to be able to use the ‘this’ variable and you can’t very well use:name: $(this + ‘ :selected’).text()

  • http://twitter.com/stevemeisner Steve Meisner

    I'm needing the same thing – have you had any luck?

  • http://twitter.com/stevemeisner Steve Meisner

    I'm needing the same thing – have you had any luck?

  • brettalton
  • Dorthe D.

    I'm new to JQuery (and Javascript). If I want to use the :selected selector, and I have more than one select in my form, how can I know which select the option is selected in? Here is an example:

    <select name=”garden”><option>Flowers</option><option selected=”">Shrubs</option><option>Trees</option><option>Bushes</option><option>Grass</option><option>Dirt</option></select>

    <select name=”house”><option>Red house</option><option selected=”">Yellow house</option><option>Green house</option></select>

    when I use the :selected Selector on this, the result will be the 2 options, Shrubs and Yellow House, but I don't know which select the 2 options are coming from. Is there a way to get to know this?

  • GFunk

    Use $(“select[name='garden'] option:selected”) to select a option in your garden drop-down menu and $(“select[name='house'] option:selected”) to select a option in your house drop-down menu. Hope that helps.

  • Jinwen_wang

    It's not working in IE6. Is there a workaround? Thanks!

  • Juviloso

    to find the id:

    var id=$(this).attr('id');

    to find the texto for it selected option:

    var cat_txt=$('#'+id+' :selected').text();

    when i see your answer, then i find a solution for me :D

  • http://lonesomeday.wordpress.com/ Sam

    Use this.id, not $(this).attr('id'). This will be far, far quicker.

  • horizons

    $(“option:selected”,this).text();
    should also work

  • ahoge

    He probably meant the select's itself, not the option's id. Does anybody know how to get it?

  • ahoge

    He probably meant the select's itself, not the option's id. Does anybody know how to get it?

  • Manas

    how to return selectedindexchanged is true or false of dropdownlist using jquery

  • Shakyshane

    $(“#ddlStates”).find(':selected').text();

    This worked REALLY well…

    Also, if you have this type of option – <option value=”1″>My option</option>

    and you want to return the '1' instead of the text, just use…

    $(“#ddlStates”).find(':selected').val();

  • Vaandu

    I use “$(stateId).val(state);” to set value for the State dropdown, I need to make the option selected. How to get the options from it and make it selected?