i have 2 select elements on page , need if first 1 changed, have second contain options first except 1 selected in first.
they start off identical options , can disable second until first selected if needed. so, if have:
... <select id="selectone" onchange="somefuntion()"> <option value="1">one</> <option value="2">two</> <option value="3">three</> </select> <select id="selectone" onchange="somefuntion()"> <option value="1">one</> <option value="2">two</> <option value="3">three</> </select> ... ...and 2 selected in first, should removed second. if 3 selected in first, second should have in listed in first (including 2 again) except three. first ones options never change , second should have in first except selected option. ideas on how best accomplish this?
i cannot bring jquery mix this, please no jquery specific answers. beyond open pretty anything. can initial value selected in first removed second, not sure how handle changes there.
tia!
if disabling options in selecttwo fine, might this. if not, might "hide" matching option display:none class , use classlist.add , classlist.remove hide , show rather disable , enable.
both hide , disable methods here result in possibility item remove once selected in selecttwo. neither strategy great in situation. if must avoid it, might either set value of selecttwo "good" 1 or alternatively, delete children of selecttwo , clone non-selected children of selectone , add selecttwo.
if want example of remove/clone strategy let me know , post that.
function selectclick(event) { var = document.queryselector("#selecttwo"); var thatoptions = that.queryselectorall("option"); (var = 0; < thatoptions.length; i++) { thatoptions[i].disabled = (thatoptions[i].value === this.value); } } document.queryselector("#selectone").addeventlistener("change", selectclick);<select id="selectone"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> <select id="selecttwo"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select>