jQuery: Setting select list 'selected' based on text, failing strangely
JavascriptJqueryJavascript Problem Overview
I have been using the following code (with jQuery v1.4.2) to set the 'selected' attribute of a select list based on its 'text' description rather than its 'value':
$("#my-Select option[text=" + myText +"]").attr("selected","selected") ;
This code worked fine, until I noticed one select list on which it failed, depending on the text that was being matched. After some hair-pulling I realized that it was failing only in cases where the text was a single word (no spaces, no non-alpha characters). (All of my previous uses of this code had worked fine with select lists comprised solely of multi-word chemical names.)
For example, within the one select list, it worked fine with:
pharbitic acid
25-D-spirosta-3,5-diene
pogostol (#Pogostemon#)
It failed with:
glucose
adenine
I have tried any way I could think of to surround the text variable with quotes (both single and double) to no avail. (But why should a single word need quotes when a two word phrase does not?)
I have tried hard coding the text in there and had the same result.
This works:
$("#constituent option[text=#a#-allocryptopine]").attr('selected', 'selected');
This works:
$("#constituent option[text=5-O-methylrisanrinol]").attr('selected', 'selected');
This did not work:
$("#constituent option[text=adenine]").attr('selected', 'selected');
I tried hard coding quotes. This did not work:
$("#constituent option[text='glucose']").attr('selected', 'selected');
I could not get hard coded quotes (single or double) to work with any text at all.
It's worth noting that quotes are acceptable when using the 'value' attribute. E.g., both of these work fine:
$("#constituent option[value='3']").attr('selected', 'selected');
$("#constituent option[value=3]").attr('selected', 'selected');
Below is some code to demonstrate the problem. Two select lists, the first of which is comprised of simple words, the second of two word phrases. When the page loads it tries to set the value of each select list. The jQuery code works for the second list but not the first. (I tried putting a space in 'monkey' to get 'mon key' and it worked!)
A working demo of the code below is http://snubian.com/test/select.html">here</a>;.
I would greatly appreciate any insight into what I am doing wrong here. Or even an alternative selector syntax for using the
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="../js/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var text1 = 'Monkey';
$("#mySelect1 option[text=" + text1 + "]").attr('selected', 'selected');
var text2 = 'Mushroom pie';
$("#mySelect2 option[text=" + text2 + "]").attr('selected', 'selected');
});
</script>
</head>
<body>
<select id="mySelect1">
<option></option>
<option>Banana</option>
<option>Monkey</option>
<option>Fritter</option>
</select>
<select id="mySelect2">
<option></option>
<option>Cream cheese</option>
<option>Mushroom pie</option>
<option>French toast</option>
</select>
</body>
</html>
Javascript Solutions
Solution 1 - Javascript
When an <option> isn't given a value="", the text becomes its value, so you can just use .val() on the <select> to set by value, like this:
var text1 = 'Monkey';
$("#mySelect1").val(text1);
var text2 = 'Mushroom pie';
$("#mySelect2").val(text2);
You can test it out here, if the example is not what you're after and they actually have a value, use the <option> element's .text property to .filter(), like this:
var text1 = 'Monkey';
$("#mySelect1 option").filter(function() {
return this.text == text1;
}).attr('selected', true);
var text2 = 'Mushroom pie';
$("#mySelect2 option").filter(function() {
return this.text == text2;
}).attr('selected', true);
Solution 2 - Javascript
$("#my-select option:contains(" + myText +")").attr("selected", true);
This returns the first option containing your text description.
Solution 3 - Javascript
try this:
$("#mySelect1").find("option[text=" + text1 + "]").attr("selected", true);
Solution 4 - Javascript
Using the filter() function seems to work in your test cases (tested in Firefox). The selector would look like this:
$('#mySelect1 option').filter(function () {
return $(this).text() === 'Banana';
});
Solution 5 - Javascript
I usually use:
$("#my-Select option[text='" + myText +"']").attr("selected","selected") ;
Solution 6 - Javascript
In case someone google for this, the solutions above didn't work for me so i ended using "pure" javascript
document.getElementById("The id of the element").value = "The value"
And that would set the value and make the current value selected in the combo box. Tested in firefox.
it was easier than keep googling a solution for jQuery
Solution 7 - Javascript
The following works for text entries both with and without spaces:
$("#mySelect1").find("option[text=" + text1 + "]").attr("selected", true);
Solution 8 - Javascript
I tried a few of these things until I got one to work in both Firefox and IE. This is what I came up with.
$("#my-Select").val($("#my-Select" + " option").filter(function() { return this.text == myText }).val());
another way of writing it in a more readable fasion:
var valofText = $("#my-Select" + " option").filter(function() {
return this.text == myText
}).val();
$(ElementID).val(valofText);
Pseudocode:
$("#my-Select").val( getValOfText( myText ) );
Solution 9 - Javascript
We can do it by searching the text in options of dropdown list and then by setting selected attribute to true.
This code is run in every environment.
$("#numbers option:contains(" + inputText + ")").attr('selected', 'selected');
Solution 10 - Javascript
setSelectedByText:function(eID,text) {
var ele=document.getElementById(eID);
for(var ii=0; ii<ele.length; ii++)
if(ele.options[ii].text==text) { //Found!
ele.options[ii].selected=true;
return true;
}
return false;
},
Solution 11 - Javascript
If you want to selected value on drop-down text bases so you should use below changes: Here below is example and country name is dynamic:
<select id="selectcountry">
<option value="1">India</option>
<option value="2">Ireland</option>
</select>
<script>
var country_name ='India'
$('#selectcountry').find('option:contains("' + country_name + '")').attr('selected', 'selected');
</script>