Javascript 在类似下拉列表之间禁用选定选项

我有一组下拉菜单（HTML选择），其中填充了来自mysql查询的相同值。我希望，只要我从下拉列表中选择一个选项，该选项就不能在其余选项中选择（或显示为禁用）。基本上，这就是我所拥有的：

<form name="test" method="post" action="confirmSelection.php">
<select name="color1" id="color1">
<?php
$sql = "SELECT * 
        FROM colors
        ORDER BY name";

$res = mysql_query($sql);       

while( $row = mysql_fetch_array( $res ) ) 
{                                               
?>
<option value="<?php echo ($row["id"]) ?>"> <?php echo( $row["name"] )?></option>
<?php
}
?>
</select>
<select name="color2" id="color2">
<?php
$sql = "SELECT * 
        FROM colors
        ORDER BY name";

$res = mysql_query($sql);       

while( $row = mysql_fetch_array( $res ) ) 
{                                               
?>
<option value="<?php echo ($row["id"]) ?>"> <?php echo( $row["name"] )?></option>
<?php
}
?>
</select>
<select name="color3" id="color3">
<?php
$sql = "SELECT * 
        FROM colors
        ORDER BY name";

$res = mysql_query($sql);       

while( $row = mysql_fetch_array( $res ) ) 
{                                               
?>
<option value="<?php echo ($row["id"]) ?>"> <?php echo( $row["name"] )?></option>
<?php
}
?>
</select>

在test.php中，我使用了4、5和6选择器，与我解释3的方式相同。我还有这个：

....
$dataType=$_POST['d'];

if($dataType=='1')
{
   //4 selectors
}elseif($dataType == '2')
{
  //5 selectors
}elseif($dataType == '3')
{
   //6 selectors
}

---

div正在正确更新并显示正确的布局（4、5或6个选项），但您给我的代码不起作用。我已经尝试将javascript包含在test.php和landscape.php中。不走运：（.

将PHP放在一边。一旦PHP完成了它的工作，您将拥有一个纯HTML页面，对吗？因此javascript只需与DOM本身交互，就像正常情况一样

首先，我想将所有选定元素的选定选项存储在一个数组中。这样做可以在第一个和第二个颜色选择器中选择一个选项，并在第三个颜色选择器中禁用它们

然后，简单地迭代所有连接的选项（我已经通过匹配类连接了它们），并在其中迭代所有选择的选项，并根据需要禁用它们

听起来很简单，但这是一个挑战。更多的挑战（但不是更多）可能是允许多重选择

希望有帮助，如果需要改变，请告诉我

//此数组将用于存储当前选择的
//每个连接的对象都是select。它们由一个类attr连接。
var selectedOption=新数组（$（“.colorSelector”）.length）；
/*******
*任何时候更改任何选择，我们都会更新selectedOption
*要包含新选择的数组。请注意，该数组是
*长度与选择的数量相同，并且我们
*将值设置为该数组中相关的位置
*元素本身的位置。我的意思是
*selectedOption[0]包含select[0]的值，
*selectedOption[4]包含select[4]的值，
*等等。
*******/
$（“body”）.on（“change”，“.colorSelector”，function（）{
//首先，获取所选选项的值。
选择选项[$（this.index（）]=$（this.val（）；
/***
*现在，我们迭代每个连接的select元素。
*我们要禁用在中选择的所有值
*所有其他连接的选择——我们存储的那些值
*在selectedOption数组中。只要值为
*不是空的，或默认的“…”或当前元素，
*我们禁用该选项。
***/
$（“.colorSelector”）.each（函数（）{
//首先，重新启用所有选项。
$（此）.children（“选项”）.removeAttr（“禁用”）；
//迭代选定的选项列表
对于（i=0；i

...
红色
橙色
黄的
绿色
蓝色
靛蓝
紫罗兰
...
红色
橙色
黄的
绿色
蓝色
靛蓝
紫罗兰
...
红色
橙色
黄的
绿色
蓝色
靛蓝
紫罗兰

Hi Snowmonkey，非常感谢您的精彩回复。脚本工作正常，但如果我尝试用AJAX嵌入功能，它就不起作用了。这是我拥有的：scape.php：当它第一次加载时，我有两个带颜色的选择器。在这里，它工作正常。我还有3个按钮。当我点击其中任何一个时，div con根据我点击的按钮，选择符的设置会变为3、4或5个选择符。发生这种情况时，颜色选择符不起作用。我会在原始消息中添加ajax代码。谢谢我以前做过这件事，比大多数人想象的要复杂得多。回答得好！@saysmus，我编辑了代码来处理这个问题。基本上，动态添加元素时（无论是否使用AJAX），它们不继承侦听器。因此，我更改了侦听的元素--现在body元素侦听任何正在更改的.colorSelector，并且应该使用动态创建的元素。@saysmus-您应该upvote/accept-如果它没有与AJAX集成，那是另一个问题。谢谢，@cale_b，谢谢您的支持。您是对的，它是ac实际上，为了让这一切顺利进行，我付出了比我想象的更多的脑力劳动。不过这很有趣。

....
$dataType=$_POST['d'];

if($dataType=='1')
{
   //4 selectors
}elseif($dataType == '2')
{
  //5 selectors
}elseif($dataType == '3')
{
   //6 selectors
}