在多选框中标识唯一值

Question

我遇到了需要你的专业知识来解决问题的情况。

我有三个多选文本框，即Roles，Database和RolesAssignedOnDatabase。

角色选择框的值为Read, Write, DBAdmin, UserAdmin。 数据库选择框具有值：ABC,XYZ等。 RolesAssignedOnDatabase选择框为空。

现在，用户必须从Roles选择框中选择一个值，然后从数据库选择框中选择，最后单击添加按钮，这将在第三个多选框（RolesAssignedOnDatabase）中添加类似Roles@Database (for eg: read@ABC, read@XYZ)的字符串模式。

现在我遇到的麻烦是，如果选择相同的值，则在添加按钮上单击两次，然后第三个选择框将获得重复的值，如

 read@ABC,read@ABC,read@XYZ.

如何在javascript中的多选框中识别重复的字符串值，而不循环比较每个值？

（P.S我没有足够的声誉来粘贴用户界面的图片。）

Answer 1

您可以使用jQuery的.find()：

if($("#multi-select-wrapper").find(":contains('" + value + "')").length == 0) {
    ... // Add the element here.
}

或者如果您更喜欢简单的javascript，您可以使用此hack创建选项值：

<option class="read@abc" value="read@abc">read@abc</option>

然后你可以使用：

var temp = document.getElementsByClassName(value)
if(temp.length == 0) {
    ... // Add the element here.
}

不推荐这样做，因为类不是选项的有效html属性，但它适用于大多数浏览器（希望如此）：Fiddle