Changing it with jQuery select does not display the selected option

Question

I have a hidden form with several selection fields and some input fields. Click the button to display this form and set some values ​​in the fields. The input fields are filled with the given values, but I have a problem with the selection fields.

Using this code:

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

with this value gets the attribute "selected" (marked in Firebug), but the option "Select" (initial) is still displayed in the selection field.

I tried to focus and blur after setting the 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 calling the jQuery expression:

 $("#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 selected "Select." If I submit the form, the value will be correctly submitted.

Then, if I reset the form and select an option, the text of the selected option will be displayed correctly. This is strange to me.

Answer 1

I have found a solution. I forgot to trigger a change event. I did not know that jQuery does not do this automatically. So the solution code is:

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

Answer 2

I had the same problem with a dropdown HTML tag . And got a solution. What I analyze while using .change (),. Attr () and .prop () is published below.

1. .change () : When I used .change (), in my case it did not work, so it is unreliable. Also a browser version problem.
2. .attr () : when I used the .attr () method / function, for example. $('#db_service option[value=1]').attr('selected', 'selected'); Analysis: He set the option attribute of the select tag to selected = selected when he saw the source code. But the changes do NOT appear on the screen.
3. .prop () : when I used the / prop method .) , for example, for. $('#db_service option[value=1]').prop('selected', 'selected'); Analysis: WILL NOT set the attribute attribute of the select tag to selected = selected when I saw the source code. But changes appear on the screen.

My solution: Use both .attr () and .prop () for a more ideal result

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

Answer 3

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

Answer 4

I had the same problem, I tried to change the selected selection option in a hidden form.

.attr(attribute, value) did not work because the displayed option was not displayed, even if the selected attribute was updated correctly. .prop(property,value) did the trick.

Answer 5

the '#form select[name=user]' trying to select the <select name="user"> element, which is a child of the element with the identifier "form" ... for example:

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

I believe that you need the following:

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

Now you need to select the <select name="user"> element, which is a child of the form, for example:

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

Answer 6

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