jQuery select option using text value $.text()
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>
7 comments
: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
click the option value change to provide new value
Thanks :D
Contains returns all the options which contain the searched string. It is not an exact match.
Examples have been updated! Use the $.filter() method for an exact match.
thanks a lot!
i just find my old selector "option[text='s3']" does not work.
nice :)
Leave a Reply