Refreshing selection after selected option is changed using jQuery

Question

I update the selected option programmatically using jQuery, but nothing changes in the browser. (That is, the old selected option remains selected, and does not switch to the newly selected option.) Suggestions?

Thanks. --Jeff

I have a simple form:

<form id="form1" name="form1" method="" action=""> <p>Assign: <select name="assigner" id="assigner"> <option value="Sam" selected="selected">Sam</option> <option value="Harry">Harry</option> <option value="Fred">Fred</option> </select> <input type="button" name="button1" id="button1" value="Submit" /> </p> <p> Task A: <select name="assignment[]" id="assigner"> <option value="Sam">Sam</option> <option value="Harry" selected="selected">Harry</option> <option value="Fred">Fred</option> </select> </p> <p> Task B: <select name="assignment[]" id="assigner"> <option value="Sam">Sam</option> <option value="Harry" selected="selected">Harry</option> <option value="Fred">Fred</option> </select> </p> </form></div> 

and my jQuery code is as follows:

 <script type="text/javascript"> jQuery(document).ready(function(){ $('[name="button1"]').click( function(){ var form = $(this).parents('form'); var assigned = form.find(':selected').first().val(); form.find(':selected').each(function(index){ $(this).val( assigned ).change(); }); } ); }); </script> 

Answer 1

I am updating the selected option programmatically using jQuery

Not as much as I can see. You reset the value of the selected option , but do nothing, as far as I can tell the actual select field.

To change a select , you need to identify it, then call val on it , not one of its option elements.

I can’t understand what you need to do input[name="button1"] , but here is an example of updating the select field: Live copy | a source

HTML:

 <select id="theSelect"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <input type="button" id="theButton" value="Click me"> 

JavaScript:

 jQuery(function($) { $("#theButton").click(function() { $("#theSelect").val("2"); }); }); 

---

Separately, as pointed out in the comments of j08691, you cannot assign the same id value ( "assigner" ) to more than one element. id values must be unique in the document. Your code does not show that you are using this id , so this may be unrelated, but worth noting.

Answer 2

 <form id="form1" name="form1" method="" action=""> <p>Assign: <select name="assigner" id="assigner"> <option value="Sam" selected="selected">Sam</option> <option value="Harry">Harry</option> <option value="Fred">Fred</option> </select> <input type="button" name="button1" id="button1" value="Submit" /> </p> <p> Task A: <select name="assignment[]" id="assigner2"> <option value="Sam">Sam</option> <option value="Harry" selected="selected">Harry</option> <option value="Fred">Fred</option> </select> </p> <p> Task B: <select name="assignment[]" id="assigner3"> <option value="Sam">Sam</option> <option value="Harry" selected="selected">Harry</option> <option value="Fred">Fred</option> </select> </p> </form> <script type="text/javascript"> jQuery(document).ready(function(){ $('[name="button1"]').click( function(){ var assigned = $("#assigner").val(); $('#form1 select').val( assigned ); } ); }); </script>