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