多个值<option>

Question

I would like to put multiple values in tag within select, so I could adress precisely one or few items.

Example:

<select id="select1">
<option value="pf, nn">NN</option>
<option value="pf, x2, jj">JJ</option>
<option value="pf, uu">UU</option>
<option value="pf, x2, oo">OO</option>
<option value="tt">TT</option>
<option value="rr">RR</option>
</select>

In my js I got that one function that depend on one value that is common for many items:

if (document.getElementById("select1").value = "pf";) {
// do something;
}
if (document.getElementById("select1").value = "x2";) {
// do some-other-thing;
}

But I don't want to use (cos' and with more options gonna get messy)

var sel1 = document.getElementById("select1").value
if (sel1="nn" || sel1="jj" || sel1="uu" || sel1="oo") {
// do something;
}
if (sel1="jj" || sel1="oo") {
// do some-other-thing;
}

Neverthelesst I need to be able to set item by precise one value

if (document.somethingelse = true) {
document.getElementById("select1").value = "oo";)
}

Is there a nice way to achieve this? Maybe use some other "value-like" attribute of option (but which?)? Only JS.

Answer 1

I think you can do what you want with selectedOpt.value.split(",").includes("sth") code:

 $(document).ready(function(e){ selectedChange($("#select1")[0]) }); function selectedChange(val) { var selectedOpt = val.options[val.selectedIndex]; var status1 = selectedOpt.value.split(",").includes("x2"); var status2 = selectedOpt.value.split(",").includes("pf"); console.log(status1); console.log(status2); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="select1" onchange="selectedChange(this)"> <option value="pf,nn">NN</option> <option value="pf,x2,jj">JJ</option> <option value="pf,uu">UU</option> <option value="pf,x2,oo">OO</option> <option value="tt">TT</option> <option value="rr">RR</option> </select>