Selecting an option in a dropdown menu based on node value?

Question

Is there a way to set the value of a dropdown list in jQuery (or Javascript) based on the node value?

 <select name="ddlProperty">
        <option value="1" selected="selected"></option>
        <option value="2">Animal Kingdom</option>
        <option value="3">Epcot</option>
        <option value="4">Hollywood Studios</option>
        <option value="5">Magic Kingdom</option>
        <option value="6">Downtown Disney</option>
</select>

I'd need to set the option of Magic Kingdom, so something like:

$("#ddlLocation").val("Magic Kingdom")

So that Magic Kingdom would become the selected item, that doesn't work as expected. Any ideas?

Answer 1

If you can use the value (not text!), do that using .val():

$("#ddlProperty").val("5");

If you don't have that, use .filter(), .text() and .attr() to find and set the selected <option>, like this:

$("#ddlProperty option").filter(function() {
  return $(this).text() === "Magic Kingdom"
}).attr('selected', true);

Answer 2

You may also need to set the ID attribute on the tag.

Other than that follow Nick's answer.

Answer 3

Something like:

var box = document.getElementById('box'),
    options = box.options;

for(var i = 0; i < options.length; ++i){
    if(options[i].text == val){
        options[i].selected = true;
    }

}

Answer 4

$("#ddlProperty > option").each(function(i, elem) {
    if($(elem).text() == "Magic Kingdom") {
        $('#ddlProperty').val(elem.value);
        return false;
    }
});

And next time please make a proper example where the element has an id and that ID matches the ID in your code. I've spent about 5 minutes checking for an error until I've noticed the ID being different...

http://jsbin.com/ikibi3/2

Answer 5

myselect="Magic Kingdom";
$("select[name='ddlProperty'] option").each(function() {
    if($(this).text() == myselect) {
        $(this).attr('selected', true);
    } else {
        $(this).attr('selected', false);
    }
});