How to set the 'selected option' of a select dropdown list with jquery
Solution 1
Try this :
$('select[name^="salesrep"] option[value="Bruce Jones"]').attr("selected","selected");
Just replace option[value="Bruce Jones"]
by option[value=result[0]]
And before selecting a new option, you might want to "unselect" the previous :
$('select[name^="salesrep"] option:selected').attr("selected",null);
You may want to read this too : jQuery get specific option tag text
Edit: Using jQuery Mobile, this link may provide a good solution : jquery mobile - set select/option values
Solution 2
Set the value it will set it as selected option for dropdown:
$("#salesrep").val("Bruce Jones");
If it still not working:
- Please check JavaScript errors on console.
- Make sure you included jquery files
- your network is not blocking jquery file if using externally.
- Check your view source some time exact copy of element stop jquery to work correctly
Solution 3
One thing I don't think anyone has mentioned, and a stupid mistake I've made in the past (especially when dynamically populating selects). jQuery's .val() won't work for a select input if there isn't an option with a value that matches the value supplied.
Here's a fiddle explaining -> http://jsfiddle.net/go164zmt/
<select id="example">
<option value="0">Test0</option>
<option value="1">Test1</option>
</select>
$("#example").val("0");
alert($("#example").val());
$("#example").val("1");
alert($("#example").val());
//doesn't exist
$("#example").val("2");
//and thus returns null
alert($("#example").val());
Solution 4
You have to replace YourID and value="3" for your current ones.
$(document).ready(function() {
$('#YourID option[value="3"]').attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="YourID">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
and value="3" for your current ones.
$('#YourID option[value="3"]').attr("selected", "selected");
<select id="YourID" >
<option value="1">A </option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
Solution 5
$(document).ready(function() {
$('#YourID option[value="3"]').attr("selected", "selected");
$('#YourID option:selected').attr("selected",null);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="YourID">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
Smudger
Updated on December 17, 2021Comments
-
Smudger over 2 years
I have the following jquery function:
$.post('GetSalesRepfromCustomer', { data: selectedObj.value }, function (result) { alert(result[0]); $('select[name^="salesrep"]').val(result[0]); });
result[0]
is a value that I want to set as theselected
item in my select box.result[0]
equalsBruce jones
.the select box is populated by a database query but one of the rendered html is:
<select id="salesrep" data-theme="a" data-mini="true" name="salesrep"> <option value=""> </option> <option value="john smith">john smith</option> <option value="Bruce Jones">Bruce Jones</option> <option value="Adam Calitz">Adam Calitz</option> <option>108</option> </select>
$('select[name^="salesrep"]').val(result[0]);
doesn't populate the select box selected option. I have also tried$("#salesrep").val(result[0]);
without any luck.Any help appreciated.
so what I want is the selected / highlighted option in the salesrep dropdown list to be Bruce Jones.
HTML to be:
<select id="salesrep" data-theme="a" data-mini="true" name="salesrep"> <option value=""> </option> <option value="john smith">john smith</option> <option value="Bruce Jones" selected >Bruce Jones</option> <option value="Adam Calitz">Adam Calitz</option> <option>108</option> </select>
Thanks again,
Entire Script
<script type="text/javascript"> $(document).ready(function () { $("#customer").autocomplete( { source: "get_customers", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var selectedObj = ui.item; $.post('GetSalesRepfromCustomer', {data:selectedObj.value},function(result) { alert(result[0]); var selnametest="Bruce Koller"; $("#salesrep").val(selnametest); }); } }); }); </script>
Rendered HTML is:
<select id="salesrep" data-theme="a" data-mini="true" name="salesrep"> <option value=""> </option> <option value="RyanLubuschagne">Ryan Lubuschagne</option> <option value="Bruce Jones">Bruce Jones</option> <option value="Adam Calitz">Adam Calitz</option> </select>