Prevent user of selecting same values on select html -
i have 2 selects same values
eg:
<select id="1"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> <select id="2"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select>
how can prevent user not choose same values on both boxes?
i populating select values php database.
edit:
i arrived on this: jsfiddle
but needs improvement when changing value selected.
first of html , css not designed that.
said that,maybe can hack css similar since <option>
inside both <select>
haven't relationship (child-parent, sibling...) can not use css pseudo selector (:checked
)to disable options that:
(this code wont work case remove duplicates if options in same <select>
because sibling)
[value="volvo"]:checked + [value="volvo"] {display: none;}