使用javascript突出显示选择选项

Question

我有一个这样的组列表：

<select id="groups">

<option value="g1">G1</option>
<option value="g2">G2</option>
<option value="g3">G3</option>

</select>

我有一个联系人列表，其中基本上包含：

Name = group
============
Casper  G1-G2-G3
Andy    G1-G2
Mark    G2-G3 

当用户选中Casper checkbox并单击“ Edit按钮时G1-G2 and G3应在组列表中突出显示（选定） G1-G2 and G3 。 当我获得联系人列表中分组字段的值时，所有三个分组都带有逗号"G1-G2-G3" 。 非常感谢您的帮助。 谢谢，

Answer 1

您可以使编辑按钮将所选属性分配给选项，然后使用css对其进行样式设置。

option[selected] { background: #f00; }

Answer 2

一些提示，我相信这对您自己解决此问题很有帮助;）

• 似乎Casper属于多个组，因此您应该为您的select设置multiple="true"

• 当您检查Casper ，检索与他关联的组数据，说["g1", "g2", "g3"] 。 遍历此列表，并将每个选项的值设置为selected 。

• 如果你想支持IE6，你也需要加个班，说selected到selected选项。

• CSS规则{ option.selected: background: yellow}将达到目的。

• 如果您仅针对现代浏览器，则option[selected]{ xxx }效果很好。

Answer 3

OK，所以我想有一个Casper复选框，单击该复选框时会调用以下函数：

function(groupstring) {
// groupstring is something like "G1-G2"

    var groups = groupstring.split("-");
    var options = document.getElementById("groups").options;
    for (var i=0; i<options.length; i++) {
        var opt = options[i];
        opt.defaultSelected = groups.indexOf(opt.value) > -1;
    }
}

我不确定您要使用selected属性还是defaultSelected属性。 请注意，您的select应该将multiple设置为true（ <select id="groups" multiple> ）。