使用 jQuery 以编程方式在 <select> 中选择一个 <option>答案

【问题标题】：Programatically select an <option> within a <select> using jQuery使用 jQuery 以编程方式在 <select> 中选择一个 <option>
【发布时间】：2011-12-01 08:08:19
【问题描述】：

我有一种情况，我需要以编程方式在选择中选择一个选项。我似乎找不到答案，我的大脑变得糊涂了……这就是我一直在尝试的（以及其他各种变体）。

$("#location_list option[value='"+LID+"']").attr("selected", "selected");

任何帮助将不胜感激！

谢谢！

这是周围的代码...

function loc_commitData(location_data, update_loc) 
    {   
        if (window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest();
            }
        else
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

        xmlhttp.onreadystatechange = function()
        {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {

                populate_loc_list('<?php echo $CompanyID; ?>', $("input:radio[name='locationstatus']:checked").val());
                bind_events_to_location_list();

                $("#location_list").val(xmlhttp.responseText);
            }
        }

        xmlhttp.open("GET", "includes/save_location_data.php?" + location_data, true);
        xmlhttp.send();     
    };

这是 HTML sn-p，其中 location_list 被插入到 span 标签中...

<fieldset style="margin-right: 15px;">
<legend>Locations</legend>
<span id="location_list_span"> THIS IS WHERE location_list GETS INSERTED ON THE FLY AFTER THE PAGE IS CREATED BY PHP</span>
</fieldset>

【问题讨论】：

仅供参考，.attr() 对 properties 来说是件坏事。如果您想以编程方式选择某些内容，最好使用.prop('selected', true_or_false)。这同样适用于复选框及其checked 属性。不过不管怎样，暗影巫师的解决方案要好得多。
响应文本可能不等于任何选项的值。拥有alert(xmlhttp.responseText) 并亲自查看。
嗯......你说得对......出于某种原因，我的 PHP 正在回显一个空字符串......（我猜这是另一个问题）。但是，即使我只是将数字 3 硬编码到 .val('3') 中...与其中一个位置匹配，它仍然是不行的...这让我发疯了，现在是凌晨 3:30我累了！ ;) 非常感谢！
请在回复评论时使用@，例如@Shadow 会通知我.. 我现在偶然看到这个。无论如何，.val("3") 将选择 value 为 3 的任何选项，即<option value="3">some text here</option>，因此populate_loc_list 的邮政编码可能会更好。
@Shadow 我发现了我的问题！！ #location_list 从未真正创建，除非是动态创建的……所以当您在浏览器中查看代码时，它甚至都不存在！它的 html 代码，即......所以 $("#location_list").val(xmlhttp.responseText) 不起作用，因为根据我的 jQuery 代码...... #location_list 不存在......哈！在 ajax 调用中创建的整个 html 代码被插入到标记中...

标签： jquery select option

【解决方案1】：

试试这个：

$("#location_list").val(LID);

设置下拉值should do the trick。

【讨论】：

不...试过了。不过谢谢...这非常令人沮丧。这并不重要，但我正在做的是在更改 MySQL 表后动态构建一个选择列表，然后使用新数据重建选择列表......我希望选择在重建后选择相同的选项。 .. 有道理？ ;)
正如您在链接的 jsFiddle 中看到的那样，它可以工作。在重建列表之前存储选定的值，例如LID = $("#location_list").val(); 那么它应该可以正常工作。
Hmpf...我现在可以看到您的在 jsFiddle 中工作，但由于某种原因我的不起作用...看起来我需要自己做一些摆弄...谢谢！ !

【解决方案2】：

$("#location_list").selectedIndex = index of the obj;

编辑：

其实我在我的一个旧脚本中有这个，是的，它实际上可以提供正确的索引。但是，由于我们谈论的是规范方式，因此我遇到了类似的问题：

select.children("option").each(function () {
  if ($(this).text().match(matcher)) {
    this.selected = valid = true;
  }
});

为什么我应该使用父选择而不是使用选项集合？

【讨论】：

这个想法可能行得通，但是你的语法是错误的，而且有点矫枉过正。
-1 a) 发布不起作用的代码，b) 混合 jquery 和直接 com 访问（这几乎是 (a) 的原因）。设置selectedIndex的正确方法是$('#location_list').prop('selectedIndex', idx);和$('#location_list')[0].selectedIndex = idx;
@Thief 谢谢，不熟悉.prop 方式——它是jQuery 中的新功能吗？ $('#location_list')[0] 是有风险的，当没有这样的元素时它会崩溃并出错。
是的，我认为它是在 1.5 中添加的。在此之前.attr() 可能有效 - 但直接访问该字段从未成功。事实上，[0] 是个坏主意 - 但它仍然是访问底层 DOM 元素的有效方式。
BigMike - 工作并不意味着它很好。当您可以在一行中完成时，为什么要遍历所有选项并编写复杂的代码？如果你能解释一下好处，那就太好了..

【解决方案3】：

在阅读了您对 Shadow Wizard 的评论（建议了正确的解决方案）之后，您似乎可能遇到以下两个问题之一：

时间问题 - 你有这样的代码：

var LID = $("#location_list").val();   
$.ajax(/*go get items for new  select and populate it on success*/);   
$("#location_list").val(LID); //this will happen before the ajax return and populate the list

您没有返回新列表中的值，或者您尝试通过它的文本设置它的值

哦，忘记将解决方案添加到 1 - 重新填充列表后，只需在 Ajax 调用的成功回调中选择旧值

【讨论】：

【解决方案4】：

使用 jquery 1.9.1 和 jquery mobile 1.3.0 时，您必须添加刷新语句：

$("#location_list").val(LID);
$("#location_list").selectmenu("refresh");

Test it on jsfiddle

【讨论】：

【解决方案5】：

我使用了这段代码，它对我有用。
$("#selectID option")[index].selected = true;

【讨论】：