Jquery Javascript HTML selects

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);
    }

So you want the last option to be dynamic? how will the value be set? — Teun Pronk
– Teun Pronk, Commented Jan 12, 2012 at 11:05

BenMorel · Accepted Answer · 2013-12-02 15:34:24Z

3

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);

edited Dec 2, 2013 at 15:34

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Jan 12, 2012 at 11:08

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rory McCrossan Over a year ago

+1 for suggesting the use of value. A much more succinct solution.

Rory McCrossan · Accepted Answer · 2012-01-12 11:06:26Z

1

Try this:

var abc = "ABC";
$("#exampleselect option").each(function() {
    if ($(this).text() == abc) {
        $(this).attr("selected", true);
        return false; // exit each loop
    }
})

Or this, although this is slightly less readable:

var abc = "ABC";
$("#exampleselect option").each(function() {
    $(this).attr("selected", $(this).text() == abc);
})

answered Jan 12, 2012 at 11:06

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

mas-designs · Accepted Answer · 2012-01-12 11:07:21Z

0

This fiddle may help you . You can achieve this by CSS Selectors which are supported by jQuery

var searched="abc";
$('select option['+searched+']').attr("selected","selected");

http://jsfiddle.net/7EzqU/

answered Jan 12, 2012 at 11:07

mas-designs

7,5311 gold badge33 silver badges56 bronze badges

Comments

jcvandan · Accepted Answer · 2012-01-12 11:09:26Z

0

// iterate all select options using jquery .each method    
$('#exampleselect option').each(function () {

    // check if current option text is equal to 'ABC'
    if ($(this).text() == 'ABC') {

        // get index of option
        var index = $('#exampleselect').index($(this))

        // set selectedIndex property to change to this option
        $('#exampleselect').prop('selectedIndex', index);
    }
})

answered Jan 12, 2012 at 11:09

jcvandan

14.4k19 gold badges69 silver badges106 bronze badges

Comments

Teun Pronk · Accepted Answer · 2012-01-12 11:09:32Z

0

this should do the trick: http://jsfiddle.net/xXEVw/

answered Jan 12, 2012 at 11:09

Teun Pronk

1,39714 silver badges25 bronze badges

Collectives™ on Stack Overflow

Jquery Javascript HTML selects

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related