如果以前选择过，则禁用选择选项

Question

嗨，我之前在这里看到过这个问题，但我的问题有所不同，我还没有看到解决方案。我有多个下拉列表，例如让我们说 5。它们都包含相同的选项值，除了第一个选项是从我的 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。目前，我假设options 的数组可以在createDropdown() 函数中进行硬编码，但其他方式也应该很容易。

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