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

Posted 2023-02-22

【中文标题】如何使用 jquery 设置选择下拉列表的“选定选项”

【英文标题】：How to set the 'selected option' of a select dropdown list with jquery

【发布时间】：2013-07-25 06:11:15

【问题描述】：

我有以下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>

【问题讨论】：

您检查过result[0] 的值是否符合您的预期？

嗨，是的，我确实检查了，谢谢。呈现的 HTML 选择元素是真实的。即使我尝试$("#salesrep").val('bruce Jones') 它也不起作用？与 php 填充选择选项有什么关系？

嗨，用完整的脚本和呈现的 HTML 编辑问题。谢谢

好的，经过一些试验，这个问题是由 jquery ui 和 jquery mobile 创建的。没有他们，这 100% 有效。见小提琴jsfiddle.net/szpgF。有什么办法吗？谢谢。

【参考方案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 get specific option tag text

编辑：使用 jQuery Mobile，这个链接可能会提供一个很好的解决方案：jquery mobile - set select/option values

【讨论】：

谢谢。试过这个没有运气。 :-(

我让，好吧，这受 jquery mobile 和 jquery UI 的影响。如果我删除这些它可以 100% 工作。我需要 ui 和移动设备时如何解决这个问题？在jsfiddle.net/szpgF上看我的小提琴

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

再次为 jQuery Mobile 编辑，检查我添加的链接。我在小提琴中试了一下，似乎效果很好。

【参考方案2】：

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

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

Here is working Demo

如果还是不行：

请检查控制台上的 JavaScript 错误。 确保包含 jquery 文件 如果在外部使用，您的网络不会阻止 jquery 文件。 检查您的视图源一段时间，元素停止 jquery 的确切副本以正常工作

【讨论】：

谢谢，我已经添加了完整的脚本。请查看是否存在根本原因，尽管我没有从萤火虫那里得到任何错误。你给的语法对我不起作用，不知道为什么？

Zaheer，在我的网站上尝试了你的小提琴，没​​有任何 php 填充选择字段，但它仍然无法正常工作。我的 Jquery UI 和 Jquery Mobile 是在 Jquery 1.9.1 之后加载的。有任何想法吗？如果我尝试填充一个正常的文本框，它就可以正常工作。只是在选择列表中挣扎？谢谢，

您好 Zaheer，Jquery Mobile 或 Jquery UI 似乎正在影响这一点。看我的小提琴jsfiddle.net/szpgF。如果我拿走 UI 和 Mobile，它可以正常工作。有什么想法吗？

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

【参考方案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());

【讨论】：

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

@RJBrill :) 很好，很高兴帮助了我的愚蠢

嗨，如何附加<option Value>..，在我的情况下，例如选项是从一个动态填充的模板中复制的，比如 date+Day WhenSelected

【参考方案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>

【参考方案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>

【讨论】：

您在几个月前发布的代码已经无法回答问题，因此无法正常工作。

【参考方案6】：

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

我不会使值和文本相同，只是为了让您对实际抓取的内容有一个积极的断言 - 值与文本 - 这样您就知道自己在处理什么并且不会遇到这些类型的问题。

顺便说一句，我讨厌 $('#myId') 语法，因为它在 SharePoint 中毫无用处，因为它会自动生成 GUID 并将它们放在 ID 之后，迫使您必须使用 $('[id*=myID]') 获取它，而 * 表示contains 那个值，这就是我将如何设置它，除了我将省略 * 因为在这种情况下它是不必要的。但是如果你想用$而不是*来表示starts with那个值，这个语法也很有用，而且你可以用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();

【参考方案7】：

.val('Bruce jones') 和 value="Bruce Jones" 之间的匹配区分大小写。看起来您将琼斯大写在一个而不是另一个。要么追踪差异的来源，使用 id 而不是名称，要么同时调用 .toLowerCase()。