jQuery基于文本字段选择多选选项

Posted

技术标签:

【中文标题】jQuery基于文本字段选择多选选项【英文标题】:JQuery Select Multiselect Options Based on Text Field 【发布时间】:2011-11-06 22:24:03 【问题描述】:

我有一个带有多个选项的多选字段的表单,如下所示:

<select id="testselect">
    <option value="Value A">Value A</option>
    <option value="Value B">Value B</option>
    <option value="Value C">Value C</option>
    ...
</select>

有一个相关的输入字段,在加载表单时,会从查询字符串中接收逗号分隔的文本值(即值 A、值 E)。我一直在尝试做的是让 JQuery 通过在逗号之间查看然后将输入值与选项值匹配来分隔该文本字符串。如果输入字段中有值,则通过添加属性 selected="selected" 来选择对应的选项。

有人有什么想法吗?在意识到这超出了我的头脑之前,我并没有深入了解这一点。非常感谢。

【问题讨论】:

【参考方案1】:

试试这个

var values = "Value A, Value E";
var $options = $("#testselect option");
$.each(values.split(","), function()
    $options.filter("[value='"+this+"']").attr("selected", true);
);

【讨论】:

问题:当你说 var values = "Value A, Value E";这是否考虑到传入的查询字符串会因每种形式而异?换句话说,有时是“A 值,C 值”,有时是“B 值”等。 @kramden88 - 这只是一个示例,您可以在 values 变量中包含任何内容。 感谢您的澄清,我使用了 var values = $("#textfield").val();效果很好。谢谢!【参考方案2】:

有很多方法可以做到这一点,但这里有一种。 http://jsfiddle.net/cBBkG/

我假设“输入”变量将包含您从查询字符串中获得的任何内容。

【讨论】:

以上是关于jQuery基于文本字段选择多选选项的主要内容,如果未能解决你的问题,请参考以下文章

完成选择时的jQuery多选事件

jQuery多选下拉复选框在选项文本后填充

多选字段仅提交最后选择的选项

基于第一个下拉菜单的引导多选动态选项

如何使用jquery在标签中显示多选下拉列表的选定文本?

多选框的全选和全不选(复制)