Identifying Unique Values in Multi Select box

Question

I ran into a situation where I need your expertise to solve the problem.

I have three multi select text boxes namely Roles, Database and RolesAssignedOnDatabase.

Roles select box has values : Read, Write, DBAdmin, UserAdmin. Database select box has values : ABC,XYZ etc.. RolesAssignedOnDatabase select box is empty.

Now user has to select a value from Roles selectbox and then from Database select box and finally click on Add button which will add a string pattern like Roles@Database (for eg: read@ABC, read@XYZ) in the third multi select box(RolesAssignedOnDatabase).

Now the trouble I am having is that if selecting the same values, uer clicks twice on add button then the third select box gets duplicate values like

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

How can I identify duplicate string values in multiselect box in javascript without looping to compare each value ?

(P.S I don't have enough reputation to paste the picture of the UI).

Answer 1

You can use .find() of jQuery:

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

Or if you prefer plain javascript you could use create the option values using this hack:

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

Then you can use:

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

This is not recommended as class is not an a valid html attribute for option, though it will work for most browsers (hopefully): Fiddle