I used to be able to change the selected option by jQuery by $(".classname").val("0"). However, even though I can change the selected option, UI does not reflect the selected option right now... I am quite stuck on what is wrong. If I does this with only jQuery library (i.e. include only this library), it works. I mean my project includes a lot of other javascript also. I don't if they affected.

For example,

alert($('.test').val()); //I get "1"
$('.test').val("0");
alert($('.test').val()); //I get "0"

In the above example, looks that jQuery actually changed the selected option because .val() returns the "0" (i.e. selected option) But, UI shows still "1" as the selected option. I have tried another ways in the Internet. But, UI does not refresh the selected option. Is there anyone who has had the same experience?

<select class="test"  style="font-size:12px;">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

jquery-1.9.1.js is used.

I used to be able to change the selected option by jQuery by $(".classname").val("0"). However, even though I can change the selected option, UI does not reflect the selected option right now... I am quite stuck on what is wrong. If I does this with only jQuery library (i.e. include only this library), it works. I mean my project includes a lot of other javascript also. I don't if they affected.

For example,

alert($('.test').val()); //I get "1"
$('.test').val("0");
alert($('.test').val()); //I get "0"

In the above example, looks that jQuery actually changed the selected option because .val() returns the "0" (i.e. selected option) But, UI shows still "1" as the selected option. I have tried another ways in the Internet. But, UI does not refresh the selected option. Is there anyone who has had the same experience?

<select class="test"  style="font-size:12px;">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

jquery-1.9.1.js is used.

• javascript
• jquery

Share Improve this question Follow edited Jun 3, 2014 at 22:41 user2533493 asked Jun 3, 2014 at 22:34 user2533493user2533493 8122 silver badges1313 bronze badges 8

• you are not talking about <select> aren't you ? – Venzentx Commented Jun 3, 2014 at 22:38
• It is working for me fiddle – Ballbin Commented Jun 3, 2014 at 22:42
• if it is <select> you are talking about, try $(".test>option:selected").val() to get what you have selected or set the value of it – Venzentx Commented Jun 3, 2014 at 22:42
• Hi, thanks. actually, I am using <select>. I edited the quest – user2533493 Commented Jun 3, 2014 at 22:42
• Can you post a fiddle as your html doesn't suggest that first suggested value is "1". so it makes me think that there is another factor involved that might be messing with it. – Ballbin Commented Jun 3, 2014 at 22:46

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 4

Does this work? replace someValue with which one you want to switch to...

$('.test').find('option[value='+someValue+']').prop('selected',true).trigger('change');

Are you using a UI framework like jQuery UI or jQueryMobile? Since it works when you only include jQuery I definitely think the issue is caused by one of the other javascript libraries you are including.

I misunderstood you question before. Do you want to trigger the select box so that the changed value is reflected on UI ? May this works :

 $(".test").val(1).trigger("select");  // Change and trigger to '1'
 $(".test").val(0).trigger("select");  // Change and trigger to '0'

Somehow @jsmartfo 's solution didn't work for me. Possible reason can be newer version of jquery UI as this is old question.

However, following snippet works for me.

$('#myElemendId').val(valueToSet).selectmenu('refresh');