如何使用jquery设置选择下拉列表中的'selected option' [英] How to set the 'selected option' of a select dropdown list with jquery

问题描述

  $。post（'GetSalesRepfromCustomer'，{
 data：selectedObj .value 
}，function（result）{
 alert（result [0]）; 
 $（'select [name ^ =salesrep]'）。val（result [0] ）; 
}）; 
  

result [0] 是一个值我想在我的选择框中设置为选定的项目。
结果[0] 等于布鲁斯琼斯。

 < select id =选择框由数据库查询填充，但其中一个呈现的html是： salesrepdata-theme =adata-mini =truename =salesrep> 
< option value => < /选项> 
< option value =john smith>约翰史密斯< / option> 
< option value =布鲁斯琼斯>布鲁斯琼斯< / 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 =salesrepdata-theme =adata -mini =truename =salesrep> 
< option value => < /选项> 
< option value =john smith>约翰史密斯< / option> 
< option value =Bruce Jonesselected> 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，
消息：
 {
 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 =salesrepdata-theme =adata-mini =truename =salesrep> 
< option value => < /选项> 
< option value =RyanLubuschagne> Ryan Lubuschagne< / option> 
< option value =布鲁斯琼斯>布鲁斯琼斯< / option> 
< option value =Adam Calitz> Adam Calitz< / option> 
< / select> 
  

解决方案

试试这个：

  $（'select [name ^ =salesrep] option [value =Bruce Jones]'）。attr（selected，selected） ; 
  

只需替换选项[value =Bruce Jones] $ c $> code> option [value = result [0]]

想要取消选择前一项：

  $（'select [name ^ =salesrep] option：selected'）。 ATTR（ 选择，NULL）; 
  

您也可以阅读以下内容： jQuery获取特定的选项标记文本
$ b 编辑：使用jQuery Mobile，这个链接可能会提供一个很好的解决方案： jquery mobile - set select / option值

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>

解决方案

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

这篇关于如何使用jquery设置选择下拉列表中的'selected option'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！