如果先前已选择，则禁用选择选

Question

嗨我之前已经看过这个问题了，但我的方式有所不同，我没有看到解决方案。我有多个下拉菜单，例如让我们说5.它们都包含相同的选项值，除了第一个选项是echo来自我的SQL服务器。 所以第一个选项在所有5个下拉列表中都会发生变化，但其他名称仍然可用。

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

所以我试图做的是，如果“Persona”被回应到这个选择中，“Persona”将不会在此下拉列表或任何其他4个下拉列表中可用或禁用。 下面的代码适用于禁用以前选择的值，但这取决于它们在下拉列表中的顺序。 这不适用于“Persona”作为下拉列表中的第一个值回显的情况，并且仍然可以在其他下拉菜单中选择。

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

好像你实际上想要阻止一个值在一个<select>出现多次？

然后，以不同的方式查看整个情况，或许可以说您有一组预先确定的值需要在下拉列表中显示，但必须选择哪些值由您的变量定义， $selectedname1 ， $selectedname2 ，.....， $selectedname5 。

因此，可能值得考虑更改构建下拉框的逻辑，如下所示：

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

而且，你可以使用以下方法调用它：

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

这应该创建三个下拉框，其名称分别为Person1 ， Person2和Person3 ，每个选定的值分别为Persona ， Personb和Personc 。 目前，我假设可以在createDropdown()函数中对options数组进行硬编码，但它也应该很容易以其他方式进行。

希望这有助于避免下拉框中的重复值。 此外，如果您需要阻止在其他下拉列表中选择相同的值，则可以使用Javascript / jQuery进行管理 - 如上面的注释中所述。