4

So I am writing an app that requires an address input and I have a select element for the user to select the state/province. It needs to support the US and Canada so it has nested optgroups to separate those out and a single, first level option as it's default value. Here is a basic 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 option that matches input from an external source and I want to check for a match based on both the value of the option element or its text. Whichever option is a match would then be set as the selected option. I know you can set the selected option by value using

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

and I know you can set an option based on text in 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 checking if it's an optgroup and then running through all its children to check for a match? Is there an easy way through jQuery to combine the value and text methods of setting the selected option?

One other complication, I am going to be doing this within an external jQuery plugin. Within the function I need to modify I have the select element as a variable

$element

so I need a way to do it kind of like this if possible:

$element.descendents(":option").filter(function() {
  //do the selecting here
}).prop('selected', true);
3
  • 1
    perhaps using the has() class from jquery. api.jquery.com/has
    – Charles380
    Jul 25, 2013 at 21:39
  • $('#state option').filter(function(){ return $(this).text()===mytext;}).prop('selected', true); ?
    – vsr
    Jul 25, 2013 at 21:45
  • One other problem, I am doing this within a jQuery plugin so that function receives the select element as a parameter. I added this to the bottom of the question.
    – climbak
    Jul 25, 2013 at 21:49

6 Answers 6

26

If you want to select by the option value, use the value selector:

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

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

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

Solved. Since I already had my element passed to a function as a jQuery variable, $element, I couldn't just use the standard selector in the form of:

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

After a lot of trying, 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);
}
8

I am not sure I understood completely your question but I am attempting to answer it in this fiddle

The trick being that you can select it by setting the value of the select box directly

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

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

Read here for example this.

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

Would be one way to do it.

But i would guess, without knowing the exact internas of the .find() method, in the end jQuery will use at least two loops itself to perform this...

1
  • Looks like you just beat me to it. This is basically how I solved it.
    – climbak
    Jul 25, 2013 at 23:11
1

I'm late here but for future visitor, easiest way to do that 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');

Output: This will active ENT.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.