当在另一个菜单中选择了特定选项时，隐藏下拉菜单中的选项

Question

我现在陷入了以下问题：我有两个相邻的下拉菜单，它们都提供相同的选项可供选择（用户可以通过选择出发地和目的地来选择他们的旅行路线）。

这些下拉菜单中的项目取自我的数据库中的 table。我想实现以下目标：

位置 "A"、"B" 和 "C" 可选择作为起点或目的地。当用户选择 "B" 作为出发点（在第一个下拉菜单中）时，此选项不应再显示在第二个下拉菜单（目的地）中。（编辑：但它应该重新出现，当在第一个下拉列表中选择另一个选项时） "A" 和 "C" 当然也一样。

我现在用来填充下拉菜单的代码是：

<select name="anfang">
<?php

$sql = "SELECT * FROM orte";
$result = mysqli_query($dblogin,$sql); 

while($zeilestart=mysqli_fetch_array($result)) 
{
include("includes/database.php");

$ortname=$zeilestart['name'];
$ortkurz=$zeilestart['kurz'];

echo "<option value=\"$ortkurz\">";
echo $ortname; 
echo "</option>";
}
?>
</select>

这是第一个下拉菜单（开始）的代码，第二个菜单的代码几乎相同。

我认为一些 JavaScript 代码可以解决我的问题，但我真的不知道该怎么做...有人可以帮助我吗？ :)

谢谢和亲切的问候

我们

Answer 1

下面的代码应该很容易理解 - 它基本上是在 DOM 中查询第一个下拉列表的 select 元素和第二个下拉列表的选项元素。它将事件处理程序附加到第一个 select 的 onchange 事件，以便每当它的值发生变化时，都会调用处理程序函数来检查第二个 select 上的所有选项与 selected值。如果值匹配，它会在选项上设置一个 disabled 属性，否则如果选项有一个 disabled 属性（来自之前的 selection），它会删除它。

您可以在结束 body 标记之前将其添加到您的页面，将 secondSelect 更改为第二个下拉菜单的名称。

<script>
    var select1 = document.querySelector('select[name="anfang"]'),
        secondList= document.querySelectorAll('select[name="secondSelect"] option');
    select1.onchange = function(){
        var selected = this.value;
        for(var i=0;i<secondList.length;i++){
             if(secondList[i].value==selected)
                secondList[i].setAttribute('disabled',true);
             else if(secondList[i].getAttribute('disabled'))
                secondList[i].removeAttribute('disabled');
        }
    }
</script>

如果您想完全隐藏该元素（而不是禁用它），您可以使用 style 属性而不是 disabled:

<script>
    var select1 = document.querySelector('select[name="anfang"]'),
        secondList= document.querySelectorAll('select[name="secondSelect"] option');
    select1.onchange = function(){
        var selected = this.value;
        for(var i=0;i<secondList.length;i++){
             if(secondList[i].value==selected)
                secondList[i].style.display = "none";
             else if(secondList[i].style.display == "none")
                secondList[i].removeAttribute('style'); 
        }
    }
</script>

Answer 2

当我看到这个问题已经得到解答时，我正在编写代码，但这是我的贡献（完整的代码示例，使用 php 数组而不是 mysqli object/array)

http://pastebin.com/0J31FK15

当在另一个菜单中选择了特定选项时，隐藏下拉菜单中的选项

Hide an option in a dropdown menu, when a specific option has been selected in another menu

javascript

php

mysql

mysqli

drop-down-menu