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 the selected
item in my select box.
result[0]
equals Bruce 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>
This question is related to
jquery
html
selected
html-select
$(document).ready(function() {_x000D_
$('#YourID option[value="3"]').attr("selected", "selected");_x000D_
$('#YourID option:selected').attr("selected",null);_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>_x000D_
<select id="YourID">_x000D_
<option value="1">A</option>_x000D_
<option value="2">B</option>_x000D_
<option value="3">C</option>_x000D_
<option value="4">D</option>_x000D_
</select>
_x000D_
You have to replace YourID and value="3" for your current ones.
$(document).ready(function() {_x000D_
$('#YourID option[value="3"]').attr("selected", "selected");_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>_x000D_
<select id="YourID">_x000D_
<option value="1">A</option>_x000D_
<option value="2">B</option>_x000D_
<option value="3">C</option>_x000D_
<option value="4">D</option>_x000D_
</select>
_x000D_
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>
Set the value it will set it as selected option for dropdown:
$("#salesrep").val("Bruce Jones");
If it still not working:
The match between .val('Bruce jones')
and value="Bruce Jones"
is case-sensitive. It looks like you're capitalizing Jones in one but not the other. Either track down where the difference comes from, use id's instead of the name, or call .toLowerCase()
on both.
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());
Source: Stackoverflow.com