Question

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

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

地点＆＃34; A＆＃34;，＆＃34; B＆＃34;和＆＃34; C＆＃34;可以选择作为开始或目的地。当用户选择＆＃34; B＆＃34;作为出发点（在第一个下拉菜单中），此选项不应再显示在第二个下拉菜单（目的地）中。（编辑：但是当第一个下拉列表中选择了另一个选项时，它应该重新出现）与＆＃34; A＆＃34;相同和＆＃34; C＆＃34;当然。

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

<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代码可以解决我的问题，但我真的不知道该怎么做......有人可以帮助我吗？：）

谢谢和亲切的问候

weheri

Answer 1

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

您可以在结束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对象/数组）

http://pastebin.com/0J31FK15

如果在其他菜单中选择了特定选项，则在下拉菜单中隐藏选项

2 个答案: