Question

So I’ve got a standard select dropdown. One of the options in the select(the last one) I’ve got as a text string- var abc.

<select id="exampleselect">
     <option>123</option>
     <option>xyz</option>
     <option>ABC</option>
</select>

var abc = "ABC";

What I’m trying to do is search through the select, find a match against var abc then change the match of var abc to being the selected option.

What I’ve tried:

//gets all the options from the select
var selectoptions = $('#exampleselect').find('option').text(); 

//if there is a match of var abc to any of the options in the select
if (selectoptions == abc)
    {
       //work out how to get the index/eq of the matched element

       //put matched element as selected value
       $('#exampleselect').val(matchedelementindex);
    }

Answer 1

Live example.

As you don’t use the value attribute, you can use this code:

var myVar = 'xyz';

$('#exampleselect option').each(function(e) {
    var $this = $(this);
    if ($this.text() === myVar) {
        $this.prop('selected', true);
        return false; // stops the iteration
    }
});

You could also do it in one line by using the :contains() selector. But this would may not work if you have an option with text “ABC” and another with “ABCD”:

$('#exampleselect option:contains('+myVar+')').prop('selected', true);

---

Although, I would recommend that you add a value attribute to your option elements:

<select id="exampleselect">
     <option value="123">123</option>
     <option value="xyz">xyz</option>
     <option value="ABC">ABC</option>
</select>

this way you can do:

$('#exampleselect').val(myVar);