jQuery select option using text value $.text()

Content

To select an option by searching for the option's text value, use the :contains selector use the filter method.

// Select the option using the option's exact text value var selectOptionText = "Baz"; $("#select-1").find("option").filter(function(index) {     return selectOptionText === $(this).text(); }).attr("selected", "selected"); As of jQuery 1.6, use $.prop() instead of $.attr(). var selectOptionText = "wobble"; $("#select-2").find("option").filter(function(index) {     return selectOptionText === $(this).text(); }).prop("selected", "selected"); <!doctype html> <html> <head>     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />     <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>     <title></title> </head> <body>   <!-- Example 1 --> <select id="select-1">     <option>Select an option...</option>     <option value="1">Foo</option>     <option value="2">Bar</option>     <option value="3">Baz</option> </select>   <script> // Select the option using the option's exact text value var selectOptionText = "Baz"; $("#select-1").find("option").filter(function(index) {     return selectOptionText === $(this).text(); }).attr("selected", "selected"); </script> <!-- /Example 1 -->     <!-- Example 2 --> <select id="select-2">     <option>Pick a different option...</option>     <option value="5">Wibble</option>     <option value="6">wobble</option>     <option value="7">wubble</option>     <option value="8">flob</option> </select>   <script> // Select the option using the option's exact text value var selectOptionText = "wobble"; $("#select-2").find("option").filter(function(index) {     return selectOptionText === $(this).text(); }).prop("selected", "selected"); // NOTE: As of jQuery 1.6, use the $.prop() method to retrieve property values because $.attr() only retrieves attributes. </script> <!-- /Example 2 -->   </body> </html>
Posted . Did this help you? Please let me know with a comment. Thank you

Comments (RSS)

  1. anonymous

    :contains is not ideal, consider some of the values might be cintained within others.Eg, if you got an option with "bble" as text and you want the id,

    @$("select:last").find("option:contains('bble')").prop("selected", "selected") will return more than one

  2. anonymous

    click the option value change to provide new value

  3. anonymous

    Thanks :D

  4. anonymous

    Contains returns all the options which contain the searched string. It is not an exact match.

  5. anonymous

    Examples have been updated! Use the $.filter() method for an exact match.

  6. anonymous

    thanks a lot!

    i just find my old selector "option[text='s3']" does not work.

  7. anonymous

    nice :)