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;}