Changing it with jQuery select doesn't show selected option

Question

I have hidden form with a few select fields and some input fields. Click on button should show that form and set some values in the fields. The input fields are filled with given values but I have problem with select fields.

Using this code:

$("#form select[name=user]").val(value);

option with that value gets attribute "selected" (checked in Firebug) but select field still shows "Choose" (initial) option.

I tried to do focus and blur after setting value but that didn't work either.

Any suggestions?

---

This is pretty much the standard form:

<form action="#" id="form" class="fix">
<div class="holder">
    <label>User:</label>
    <select name="user" class="styled">
        <option value="0" selected>Choose</option>
        <option value="1">User 1</option>
        <option value="2">User 2</option>
        </select>
    </div>
</form>

And by calling jQuery statement:

$("#form select[name=user]").val('2');
$("#form").show();

I get this in Firebug:

<form action="#" id="form" class="fix" style="display:none">
<div class="holder">
    <label>User:</label>
    <select name="user" class="styled">
        <option value="0">Choose</option>
        <option value="1">User 1</option>
        <option value="2" selected>User 2</option>
        </select>
    </div>
</form>

but the text is select stays "Choose". If I submit form, the value is correctly passed.

Than if I reset the form and select some option the text of selected option is shown properly. That's what's weird to me.

Aguish

It works with jQuery 1.8.3 and 1.9.0 – Bawl

Answer 1

I found a solution. I forgot to call change event for . I didn't know that jQuery doesn't do it automatically. So the code for solution is:

$("form select[name=user]").val(value).change();

Aguish

@jovica Spent almost 3 hours to solve this issue and your answer helped me even after 10 years. Thanks. :) – Despoil

Answer 2

I was having the same problem with dropdown html tag. And got the solution. What I analysis during using .change(), .attr() and .prop() is shared below.

1. .change() : When I used .change() wont work in my case, so it is not reliable. Also Browser version issue.
2. .attr() : When I used .attr() method/function, for eg. $('#db_service option[value=1]').attr('selected', 'selected'); Analysis: It set attribute of select tag's option to selected=selected when i saw source code. But on screen changes are NOT Appeared.
3. .prop() : When I used .prop() method/function, for eg. $('#db_service option[value=1]').prop('selected', 'selected'); Analysis: It WONT set attribute of select tag's option to selected=selected when i saw source code. But on screen, changes are APPEARED.

My Solution: Used both .attr() and .prop() for more perfect result

$('#db_service option[value=1]').attr('selected', 'selected'); $('#db_service option[value=1]').prop('selected', 'selected');
$('#db_service').val("1").change()

Bolus

You can combine below to single line using serialisation. $('#db_service option[value=1]').attr('selected', 'selected'); $('#db_service option[value=1]').prop('selected', 'selected'); – Bolus

use both attr and prop solved my problem thanks (I was going crazy with this problem) – Venerable

Answer 3

I had the same problem. At http://api.jquery.com/attr/, there are some notes about .prop() method instead .attr(). Also, like Jovica's answer, changed option only appears in Firefox (20.0 is my version) if we use the .change() method at the end.

Herbal

Thanks for mentioning the .prop() method. I had a bug here because I was using .attr() instead of .prop(), and changing the method worked. – Shipowner

Answer 4

I had the same issue, I was trying to change the selected option of a select in a form that was hidden.

The .attr(attribute, value) wasn't working as the displayed option was not showing up even the selected attribute was correctly updated. The .prop(property,value) did the trick.

Kilbride

Answer 5

I wanted to mention that I tried everything here and only adding the following line just above $("#form select[name=user]").val(value); worked for me:

$('#form select[name=user]').trigger("updated");

Huskey

Answer 6

the '#form select[name=user]' is trying to choose a <select name="user"> element that is the child of an element with the id of "form"... eg:

<div id="form">
  <select name="user">  // This element

I believe you want the following:

$("form select[name=user]").val(value);

That should now choose a <select name="user"> element that is the child of a form, eg:

<form>
  <select name="user"> //This element

Jeu

We have two forms and that's why we use ID for the form. I putted form to simplify the example. That part works as it should. :) – Aguish

Answer 7

You can use the simple way

$(".class_name").val(value).change();

Eisenstein