Question

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!

Answer 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.