如何使用jquery设置选择下拉列表的"选定选项"

Question

我有以下jquery函数:

$.post('GetSalesRepfromCustomer', {
    data: selectedObj.value
}, function (result) {
    alert(result[0]);
    $('select[name^="salesrep"]').val(result[0]);
});

result[0]是我想要设置为selected选择框中项目的值. result[0]等于Bruce jones.

选择框由数据库查询填充,但渲染的html之一是:

<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]);不会填充选择框选定选项.我也试过$("#salesrep").val(result[0]);没有运气.

任何帮助赞赏.

所以我想要的是salesrep下拉列表中的选定/突出显示的选项是Bruce Jones.

HTML将是:

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

再次感谢,

整个脚本

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

呈现的HTML是:

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

Answer 1

试试这个 :

$('select[name^="salesrep"] option[value="Bruce Jones"]').attr("selected","selected");

只需替换option[value="Bruce Jones"]为option[value=result[0]]

在选择新选项之前,您可能希望"取消选择"前一个选项:

$('select[name^="salesrep"] option:selected').attr("selected",null);

您可能也想阅读此内容:jQuery获取特定的选项标记文本

编辑:使用jQuery Mobile,这个链接可能提供一个很好的解决方案:jquery mobile - 设置选择/选项值

Answer 2

设置值,将其设置为下拉列表的选定选项:

$("#salesrep").val("Bruce Jones");

这是工作演示

如果它仍然不起作用:

1. 请检查控制台上的JavaScript错误.
2. 确保包含jquery文件
3. 如果在外部使用,您的网络不会阻止jquery文件.
4. 检查您的视图源一段时间精确复制元素停止jquery才能正常工作

Answer 3

我认为没有人提到过的一件事，以及我过去犯过的一个愚蠢的错误（尤其是在动态填充选择时）。如果没有与提供的值匹配的值的选项，jQuery 的 .val() 将不适用于选择输入。

这是一个小提琴解释 - > 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());

Answer 4

您必须将 YourID 和 value="3" 替换为当前的。

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

并为您当前的值设置 value="3"。

$('#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>