JQuery - setting the selected option in the selection field using a value or text with options nested in optgroups

Question

So, I am writing an application that requires an address, and I have a select element for the user to select a state / province. It must support the US and Canada so that it optgroups to separate them and one first level parameter as the default value. Here is an example:

 <select name="state" id="state"> <option class="co" value="" data-placeholder="true" disabled selected>Choose your state...</option> <optgroup label="United States"> <option class="co" value="AL">Alabama</option> <option class="co" value="AK">Alaska</option> <option class="co" value="AZ">Arizona</option> </optgroup> <optgroup label="Canada"> <option class="co" value="AB">Alberta</option> <option class="co" value="BC">British Columbia</option> <option class="co" value="MB">Manitoba</option> </optgroup> 

Now I need to programmatically select the parameter corresponding to the input signal of an external source, and I want to check the correspondence based on both the value of the option element and its text. No matter which option is a match, it will be selected as the selected parameter. I know that you can set the selected option by value using

 $("#state").val(myValue) 

and I know that you can set the option based on text this way

 var myText = "The state I want."; $("#state").children().filter(function() { return $(this).text() == myText; }).prop('selected', true); 

Is there a clean way to do this without having to run through each child and check if it is an optgroup, and then runs through all its children to check for consistency? Is there a simple way through jQuery to combine the values ​​and text methods of setting the selected parameter?

Another complication I'm going to do is in an external jQuery plugin. Inside the function I need to change. I have a select element as a variable

 $element 

so I need to do this somehow, if possible:

 $element.descendents(":option").filter(function() { //do the selecting here }).prop('selected', true); 

Answer 1

solved. Since I already had the element passed to the function as a jQuery variable, $ element, I could not just use the standard selector in the form:

 $("#state option").filter( // filter function ).prop('selected', true); 

After many attempts, I got this and it works:

 function functionIHadToChange($element, value) { // other code $element.find("option").filter(function(){ return ( ($(this).val() == value) || ($(this).text() == value) ) }).prop('selected', true); } 

Answer 2

If you want to select a parameter value, use the value selector:

 var myText = "AZ"; $('#state option[value="' + myText + '"]').prop('selected', true); 

If you want to search by option label, use the filter:

 var myText = "Arizona"; $('#state option').filter(function () { return $(this).html() == myText; }).prop('selected', true) 

Answer 3

I'm not sure I fully understood your question, but I'm trying to answer it in fiddle

The trick is that you can select it by setting the direct value of the selection field

 $("#state").val( a_value ); 

Answer 4

You can set it to $("#select_id").prop("selectedIndex", 3); // Select index starts from zero. $("#select_id").prop("selectedIndex", 3); // Select index starts from zero.

Read here, for example, this .

Answer 5

 $element = $('select#state'); $options = $element.find('option'); $wanted_element = $options.filter(function () { return $(this).val() == "Alabama" || $(this).text() == "Alabama" }); $wanted_element.prop('selected', true); 

There would be one way to do this.

But I would have guessed without knowing the exact boarding of the .find() method, at the end jQuery would use at least two loops to accomplish this ...

Answer 6

I'm late here, but for a future visitor, the easiest way to do this is:

HTML

 <select name="dept"> <option value="">This doctor belongs to which department?</option> <option value="1">Orthopaedics</option> <option value="2">Pathology</option> <option value="3">ENT</option> </select> 

JQuery

 $('select[name="dept"]').val('3'); 

Exit: This will be the active ENT .