如何使用 Jquery 更改选项值？答案

【问题标题】：How to change option value with Jquery?如何使用 Jquery 更改选项值？
【发布时间】：2010-07-16 21:37:00
【问题描述】：

我正在寻找一种在用户单击链接时从选择标签更改选项值的方法。

例如我有一个选择选项 html:

<select> <option value="0">Please Select</option> 
<option value="1">red</option> 
<option value="2">white</option> 
</select>

我有 2 个链接 <a href="#" title="red" class="preview_link">red</a> <a href="#" title="white">white</a> 当用户单击红色时，选项将切换为红色，白色将切换为白色。我正在使用以下代码，但它不起作用。

 jQuery("a.preview_link").click(function() {
    var title = jQuery(this).attr("title");
        jQuery(this).parent('p').children("select :selected").text(title);
 });

有什么建议吗？

【问题讨论】：

为什么不使用 $ 而不是输入 jQuery 呢？

标签： javascript jquery option

【解决方案1】：

您的方式会将选项的文本设置为标题属性。试试：

 jQuery("a.preview_link").click(function() {
    var title = jQuery(this).attr("title");
    jQuery(this).parent('p').find("select option").filter(function() {
        return $(this).text() == title;
    }).attr('selected', 'selected');
 });

见filter。

【讨论】：

您是否正确选择了select？在您的事件处理程序中尝试alert(jQuery(this).parent('p').find("select option").length);。
这样就行了。我最后的想法是，在您的帖子中，您的一个选项的标记缺少 value 属性上的双引号：<option value=2"> 应该是 <option value="2">。尝试修复它？另外，我注意到您使用的是children，我在回答中将其编辑为find（但我不确定这有什么不同）。
@Rick：在您的代码示例中，您仅在第一个链接中设置了class="preview_link"。这应该在所有链接上。顺便说一句，卡里姆的代码工作正常。 Here's a live demo.
是的，它在所有链接上......只是错过了在这里输入......让我进一步挖掘看看发生了什么......感谢大家的帮助！

【解决方案2】：

嗯，你搞错了：你需要遍历 <option/> 元素并选择适当的元素，而不是更改所选选项的文本，如下所示：

$("select option").each(function() { 
    if($(this).text() == "red")) {
        this.selected = true; 
    }
});

编辑：jQuery 中可能有一个select() 函数。如果是这种情况，请在 DOM 属性上使用它。

【讨论】：

【解决方案3】：

这个？

$("select #some-option").attr("selected", "selected");

还是这个？

$("select").val(index);

【讨论】：