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

时间:2017-03-31 20:40:24

标签: javascript jquery drop-down-menu

嗨我之前已经看过这个问题了,但我的方式有所不同,我没有看到解决方案。我有多个下拉菜单,例如让我们说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;
  }
}

1 个答案:

答案 0 :(得分:0)

好像你实际上想要防止某个值在一个<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....
//

这应该创建三个下拉框,其名称为Person1Person2Person3,每个框中的选定值为PersonaPersonb和{分别为{1}}。目前,我已假设Personc数组可以在options函数中进行硬编码,但它也应该很容易以任何其他方式进行编码。

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