如何使用jQuery设置下拉列表的“选中选项”

Question

我有以下的jQuery函数:

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

result[0] 是我想要设置为下拉框中所选项的值。 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]);但没有成功。

非常感谢任何帮助。

所以我想要的是，在销售代表下拉列表中选择/高亮显示布鲁斯·琼斯。

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>

- Smudger

---

你检查过 result[0] 的值是否符合你的预期了吗？ - Rory McCrossan

嗨，是的，我已经检查过了，谢谢。渲染的HTML选择元素是真实的。即使我尝试 $("#salesrep").val('bruce Jones') 也不起作用？这与PHP填充选择选项有关吗？ - Smudger

好的，经过一些尝试，发现这个问题是由jquery ui和jquery mobile引起的。没有它们，这个程序可以100%正常工作。有什么解决方法吗？谢谢。 - Smudger

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 - 设置select/option的值

- Jb Drucker

---

谢谢。尝试了但没有成功。 :-( - Smudger

我是Jean，这个问题受到了jQuery Mobile和jQuery UI的影响。如果我移除它们，它就可以100%正常工作。但是我需要UI和Mobile，该怎么解决呢？请查看我的fiddle：http://jsfiddle.net/szpgF/ - Smudger

如果您看到源代码，它会正确选择，但更改z-index或字体颜色可能会显示它。 - Zaheer Ahmed

再次编辑为jQuery Mobile，检查我添加的链接。我在fiddle中尝试了一下，似乎效果不错。 - Jb Drucker

Answer 2

设置值后，它将成为下拉选项的已选择选项：

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

这里是可工作的演示

如果仍无法正常工作：

1. 请检查控制台中的JavaScript错误。
2. 确保已经包含了jquery文件。
3. 如果使用外部文件，请检查您的网络是否阻止了jquery文件。
4. 检查您的查看源代码，有时元素的精确复制会阻止jquery正确工作。

- Zaheer Ahmed

---

谢谢，我已经添加了完整的脚本。请看看是否有潜在的原因，尽管我没有从Firebug中得到任何错误信息。你给出的语法在我的这边不起作用，不确定为什么？ - Smudger

Zaheer，我在我的网站上尝试了你的fiddle，但没有任何php填充的选择字段，它仍然无法工作。我的Jquery UI和Jquery Mobile是在Jquery 1.9.1之后加载的。有什么想法吗？如果我尝试填充一个普通文本框，它可以正常工作。只是在选择列表方面遇到了困难？谢谢。 - Smudger

嗨，Zaheer，看起来Jquery Mobile或Jquery UI正在影响它。请查看我的fiddle http://jsfiddle.net/szpgF。如果我去掉UI和Mobile，它就可以正常工作。对此有什么想法吗？ - Smudger

.val() 不会设置 selected="selected" 属性，也不会取消选择其他已选项。 - vapcguy

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());

- Jake Zieve

---

我也犯了同样的愚蠢错误，这个答案在关键时刻帮了我很大忙。我的错误是尝试将val()设置为选项文本本身，而不是所需选项的值属性（它们非常相似，但大小写不同...） - R Brill

@RJBrill :) 很好，很高兴我的愚蠢能帮到你。 - Jake Zieve

你好，如何将<option Value>..附加到我的代码中？例如，在我的情况下，选项是从动态生成的模板中复制的，例如日期+当天被选中。 - Transformer

Answer 4

您需要将YourID和value="3"替换为当前的ID和值。

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

- Oscar Fuquen

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

- Madhuka Dilhan

---

你拿了几个月前发布的代码，它已经不能回答问题了，然后你让它不能工作了。 - Doyle Lewis

Answer 6

使用 $('select[id="salesrep"]').val() 获取选择的值。

使用 $('select[id="salesrep"]').val("john smith") 从下拉列表中选取一个值。

或者，您可以使用以下 JavaScript 代码：

for (var option of document.getElementById("salesrep").options) {
    //alert(option.value);
    if (option.value === "john smith") {
        option.selected = true;
        return;
    }
}

- srihitha

Answer 7

.val() 不喜欢通过文本设置，而是使用索引进行设置，因此您应该使用 find 获取它，然后进行设置。但即使如此，这只是故事的一部分。您应该首先取消选择所有其他选项，并将您找到的索引设置为所需选项的 selected 属性。

我不会让值和文本相同，这样您就可以肯定地断言您实际获取的内容 - 值与文本 - 以便您知道自己正在处理什么并避免遇到这些问题。

顺便说一下，我讨厌$('#myId')语法，因为在SharePoint中它是无用的，因为它会自动生成GUID并将它们放在ID后面，强制你必须使用$('[id*=myID]')来获取它，其中*表示它包含该值，所以这就是我将如何设置它的方式，除了我会省略*，因为在这种情况下它是不必要的。但是如果您想使用$而不是*来表示它以该值开头，那么这个语法也非常有用，您可以使用title或name代替id，因此它非常灵活，我希望更多的人使用它。

您还应该纠正您的大小写问题，因为JavaScript是区分大小写的。

$(document).ready(function() {
    var yourText = "Bruce Jones";

    // Remove all 'selected' attributes from all options
    $('select[id="salesrep"] option').removeAttr('selected');

    // Get the index for the value you want to set
    var idx = $('select[id="salesrep"] option').filter(function() {
        return $(this).html() == yourText;
    }).val();

    // Set the dropdown value by index and set it as selected by text
    var salesrepBox = $('select[id="salesrep"]');
    salesrepBox.val(idx);
    salesrepBox.find('option[value="' + yourValue + '"]').attr('selected','selected'); // note that .val() doesn't do this
    salesrepBox.click(); // may be useful and necessary for certain engines to cache the value appropriately

    console.log(salesrepBox.html()); // should show you that the selected option is Bruce Jones
    console.log(salesrepBox.val());  // should give you the index 2

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="salesrep">
  <option value="1">John Smith</option>
  <option value="2">Bruce Jones</option>
  <option value="3">Adam Calitz</option>
</select>

对于jQuery Mobile，您可能需要在影响下拉菜单的selected属性的行之后执行此操作，无论是删除还是添加它：

salesrepBox.selectmenu("refresh", true);

或在上述命令末尾执行.change();，例如：

$('select[id="salesrep"] option').removeAttr('selected').change();
salesrepBox.find('option[value="' + yourValue + '"]').attr('selected','selected').change();

- vapcguy

Answer 8

.val('Bruce jones') 和 value="Bruce Jones" 之间的匹配是区分大小写的。看起来你在一个中将Jones大写了，而在另一个中没有。要么找出差异来自哪里，使用id代替名称，或在两者上都调用.toLowerCase()。

- Black Mantha