Disable select option if previously selected

Question

Hi I have seen this question asked before on here, but mine varies in a way which I have not seen a solution to.I have multiple dropdowns, for example lets say 5. They all contain the same option values except the first option is echo'd from my sql server. So the first option changes throughout all 5 dropdowns, but the other names are still available.

<select name="Person1"/>
    echo "<option value='$selectedname'>$selectedname</option>";
    echo "<option value='Persona'>Persona</option>";
    echo "<option value='Personb'>Personb</option>";
    echo "<option value='Personc'>Personc</option>";
    echo"</select>";

<select name="Person2"/>
    echo "<option value='$selectedname2'>$selectedname2</option>";
    echo "<option value='Persona'>Persona</option>";
    echo "<option value='Personb'>Personb</option>";
    echo "<option value='Personc'>Personc</option>";
    echo"</select>";

<select name="Person3"/>
    echo "<option value='$selectedname3'>$selectedname3</option>";
    echo "<option value='Persona'>Persona</option>";
    echo "<option value='Personb'>Personb</option>";
    echo "<option value='Personc'>Personc</option>";
    echo"</select>";

<select name="Person4"/>
    echo "<option value='$selectedname4'>$selectedname4</option>";
    echo "<option value='Persona'>Persona</option>";
    echo "<option value='Personb'>Personb</option>";
    echo "<option value='Personc'>Personc</option>";
    echo"</select>";

<select name="Person5"/>
    echo "<option value='$selectedname5'>$selectedname5</option>";
    echo "<option value='Persona'>Persona</option>";
    echo "<option value='Personb'>Personb</option>";
    echo "<option value='Personc'>Personc</option>";
    echo"</select>";

So what I am attempting to do, if "Persona" is echo'd into this select, "Persona" will not be available or disabled in this dropdown or any of the other 4 dropdowns. The code below works for disabling previously selected values, but that is based off of the order they are in in the dropdown. This does not work in the case that "Persona" is echo'd as the first value in the dropdown, and will still be able to be selected in other dropdowns.

function id2el(elmt1){return document.getElementById(elmt1);}

id2el("fm1").onchange = function(event) {

if (event.target.tagName.toUpperCase() == "SELECT") {
  id2el("s"+event.target.id).innerHTML = event.target.selectedIndex ? event.target.value : "";
  var sels = this.getElementsByTagName('select'), goo = 0, oldIn = 0;
  for (var i =0; i< sels.length; ++i) {
    if (goo) {
      if (event.target.selectedIndex) {
        sels[i].options[event.target.selectedIndex].disabled = true;
        if (sels[i].selectedIndex == event.target.selectedIndex) {id2el("s"+sels[i].id).innerHTML = "";
        sels[i].oldIndex8 = 0; sels[i].selectedIndex = 0;}
        }
      if(oldIn) sels[i].options[oldIn].disabled = false;
      }
    if(sels[i] == event.target) {goo=1; if(event.target.oldIndex8) oldIn = event.target.oldIndex8}
    }
  event.target.oldIndex8 = event.target.selectedIndex;
  }
}

Answer 1

Seems like you actually want to prevent a value from appearing more than once in a single <select> ?

Looking at the whole situation in a different way then, it can perhaps be said that you have a pre-determined set of values that need to be shown in the dropdowns, but which of those has to be selected is defined by your variables, $selectedname1 , $selectedname2 , ....., $selectedname5 .

Therefore, it might be worthwhile to consider changing the logic to build the dropdown boxes as follows:

function createDropdown($elementName, $selectedValue){
    $options       =   array("Persona", "Personb", "Personc", "Persond");
    $selectedFlag  =   "";

    echo "<select name='".$elementName."'>";
    for($i=0; $i<count($options); $i++){
        if($options[$i] == $selectedValue){
            $selectedFlag = "selected='selected'";
        }
        else{
            $selectedFlag = "";
        }    
        echo "<option value='".$options[$i]."' ".$selectedFlag.">"
                .$options[$i] 
            ."</option>";
    }
    echo "</select>";
}

And, you could invoke this using:

createDropdown("Person1", "Persona");    //or... createDropdown("Person1", $selectedname1);
echo "<br>";
createDropdown("Person2", "Personb");    //or... createDropdown("Person2", $selectedname2);
echo "<br>";
createDropdown("Person3", "Personc");    //or... createDropdown("Person3", $selectedname3);
//
//and so on....
//

This should create the three dropdown boxes with names as Person1 , Person2 and Person3 and the selected values in each being Persona , Personb and Personc respectively. For the time being, I've assumed that the array of options can be hardcoded in the createDropdown() function, but it should be easy to in any other way too.

Hopefully, this should help in avoiding the duplicate values in the dropdown boxes. Also, if you then need to prevent the same value from getting selected in the other dropdowns, then that can be managed using Javascript / jQuery — as identified in the comments above.