禁用类似下拉菜单之间的选定选项

Question

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

<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>

有什么想法吗？我想它一定很简单，但我真的不知道如何寻找它（我真的很难为这次咨询找到合适的标题......）。

非常感谢。

编辑：

ajax代码：

function showData(dataType)
{

    var capa=document.getElementById("content");
    var ajax=nuevoAjax();
    capa.innerHTML="";
    ajax.open("POST", "test.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("d="+dataType);

    ajax.onreadystatechange=function()
    {
        if (ajax.readyState==4)
        {
            capa.innerHTML=ajax.responseText;
        }
    }
}

在 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 个选择），但您给我的代码不起作用。我试过在 test.php 和 landscape.php 中包含 javascript。运气不好 :(。

Answer 1

将 PHP 放在一边。一旦 PHP 完成它的工作，您将拥有一个纯 HTML 页面，对吗？所以 javascript 只需像往常一样与 DOM 本身交互。

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

然后，简单地遍历所有连接的 selects（我通过匹配的 class 连接它们），并在其中遍历所有 selected 选项，并酌情禁用它们。

听起来很简单，但这有点挑战。更多的挑战（但不是更多）可能是允许 multi-selects.

希望对您有所帮助，如果需要更改请告诉我。

// This array will be used to store the current selection of
//   each connected select. They are connected by a class attr.
var selectedOption = new Array($(".colorSelector").length);

/*******
 * Any time any select is changed, we update the selectedOption
 *  array to include the new selection. Note that the array is
 *  the same length as the number of selects, and that we're
 *  setting the value to the position in that array that relates
 *  to the position of the element itself. By this, I mean that
 *  selectedOption[0] contains the value of select[0], 
 *  selectedOption[4] contains the value of select[4],
 *  and so on.
 *******/
$("body").on("change",".colorSelector", function() {
  // First, get the value of the selected option.
  selectedOption[$(this).index()] = $(this).val();

  /***
   * Now, we iterate over every connected select element.
   *  we want to disable all values that are selected in
   *  all other connected selects -- those values we've stored
   *  in the selectedOption array. As long as the value is
   *  not blank, or the default '...', or the current element,
   *  we disable that option.
   ***/
  $(".colorSelector").each(function() {
    // First, re-enable all options.
    $(this).children("option").removeAttr("disabled");
    // Iterate over the selectedOption list
    for (i = 0; i < selectedOption.length; i++) {
      if (selectedOption[i] != "" && selectedOption[i] != "..." && i != $(this).index()) {
        // Disable any option that isn't default, or
        //  ignore if the current selectedOption points to
        //  this select.
        $(this).children("option[value='" + selectedOption[i] + "']").attr("disabled", "disabled");
      }
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="color1" id="color1" class="colorSelector">
  <option>...</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="indigo">Indigo</option>
  <option value="violet">Violet</option>
</select>
<select name="color2" id="color0" class="colorSelector">
  <option>...</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="indigo">Indigo</option>
  <option value="violet">Violet</option>
</select>
<select name="color3" id="color3" class="colorSelector">
  <option>...</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="indigo">Indigo</option>
  <option value="violet">Violet</option>
</select>

此外，这是一个 fiddle，以防万一。

编辑：您提到当 select 由 AJAX 填充时这不起作用。你完全正确，它没有像写的那样工作。原因是，当页面加载后加载元素时，它不会自动连接到页面的当前侦听器。相反，我在上面的代码中更改了监听器的附加位置。我没有像 $(".colorSelector").on("change"...) 那样监听，而是将其更改为 $("body").on("change", ".colorSelector", function(){...}); —— 请注意，监听器现在附加到 body。这样做会导致任何带有 .colorSelector class 的元素被触发，无论它是最初存在的还是后来添加的。希望这对您有所帮助！

禁用类似下拉菜单之间的选定选项

Disable Selected options between similar dropdowns

html

javascript

mysql

jquery

html-select