Changing it with jQuery select doesn't show selected option

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 开发者_StackOverflowname="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.

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

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

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.

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.

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

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

You can use the simple way

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