Change selected option in jQuery

Question

My html is

<select name="one_day_per_month" id="one_day_per_month" style="width: 200px">
  <option value="false" selected>No</option>
  <option value="true">Yes</option>
</select>

The page is wrapped with

$( document ).ready(function() {...}

I can change the value by using

$("#one_day_per_month").val("true")

The value is updated, but the dropdown list does not change in the browser does not change. What am I doing wrong?

Asked and answered. http://stackoverflow.com/questions/4864620/use-jquery-to-select-a-dropdown-option — CollinD, Sep 25 '15 at 22:45
It is changed http://jsfiddle.net/La1p70eL/. Are you wrapping your code in the `$( document ).ready(function() {...}` ? — Hanlet Escaño, Sep 25 '15 at 22:50
Just realised (this was not my page) that the selectmenu is a jQueryUI widget. After updating the value I need to use `$("#one_day_per_month").selectmenu( "refresh" );` — Rojj, Sep 25 '15 at 23:15

score 1 · Answer 1 · answered Oct 11 '15 at 03:27

Try this call trigger with change to achieve your requirement.

$( document ).ready(function() {
$("#one_day_per_month").val("true").trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="one_day_per_month" id="one_day_per_month" style="width: 200px">
  <option value="false" selected>No</option>
  <option value="true">Yes</option>
</select>

score 0 · Answer 2 · answered Sep 25 '15 at 23:00

Your code is probably running before the HTML tags for your select element is loaded. You have two ways to fix it:

Put your script at the end of your HTML right before the tag
Embed all your code in $(function () { /* your code here */}); This makes sure that your code runs after the HTML is entirely loaded and parsed in the browser.

Change selected option in jQuery

2 Answers2