我现在陷入以下问题：我有2个下拉菜单，它们都提供相同的选项（用户可以通过选择出发地和目的地来选择旅行路线）。
这些下拉菜单上的项目取自数据库中的一个表。我要实现以下目标：
可以选择位置“ 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代码可以解决我的问题，但是我真的不知道该怎么办...有人可以帮我吗？:)
谢谢和亲切的问候
韦赫里
以下代码应该易于理解-它基本上是在DOM中查询第一个下拉列表的select元素和第二个下拉列表的options元素。它将事件处理程序附加到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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句