Remove an option once it is selected in previous dropdowns

问题

I need to remove the selected option in a dropdown that was selected on the previous dropdwon. For example the first, second and third dropdown contain A, B, C, D. Once I selected A in dropdown1, it won't appear in both dropdowns 2 and 3. Same thing will happen to both dropdowns 2 and 3.

But in my code, things are actually like this:

I have several dropdowns populated via loop in PHP.

for($y=1; $y<=5; $y++){
echo "<select id='seatplan$x' name='selectSeatplan[]' onChange='callSave($x,$sid)'>";

     echo "<select name='selectSeatplan[]'>";
     echo "<option value=''> ------------ </option>";
          seatplanDdNames($sid);
     echo "</select>";

} //END FOR Y<-5

Please note that * seatplanDdNames($sid) - is a function where names are generated from database and here is how i echo the options from it:

function seatplanDdNames($sid) {
     echo "<option value='$studentno' onClick='callSave($x,$sid)'>$name</option>";
}

Then the javascript function callSave:

function callSave(x,sid){

    var name = 'seatplan' + x;
    name = name.toString();
    var selectBox = document.getElementById(name);
    var strUser = selectBox.options[selectBox.selectedIndex].value;
    var js = document.createElement('script');
        js.setAttribute('language', 'javascript');
        js.setAttribute('type', 'text/javascript');
        js.setAttribute('src', 'seatplan-getvalues.php?uid='+strUser+'&sid='+sid+'&rtype=CLS&seatno='+x);
    document.body.appendChild(js);

    return false;
    }

The function callSave saves the selected option in a temporary table. Just how the way I like it. The problem is, I have to avoid the redundancy of data provided in the dropdowns.

Any help? Thank you!

回答1:

Here is pure HTML/JS example. Basically on page load each select has same options. When you select something, on other selects this option hides.

回答2:

The code from Lolo works very fine but I needed to change style.dispaly = 'none' in o.disabled = true to avoid a problem with Chrome/Safari in OSX and iOS (element not hidden)

if (p == undefined || p == s) {
  o.disabled = false;
}
// option otherwise
else {
  o.disabled = true;
}

The behavior is different but the result is the same.

来源：https://stackoverflow.com/questions/8654808/remove-an-option-once-it-is-selected-in-previous-dropdowns

标签

php

javascript

select

drop-down-menu

option