我有一组下拉菜单(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>
有什么想法吗?我想它一定很简单,但我真的不知道如何寻找它(我真的很难为这次咨询找到合适的标题......)。
提前非常感谢。
编辑:
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 个选择),但您给我的代码不起作用。我尝试过将 javascript 包含在 test.php 和 Landscape.php 中。运气不好:(。
最佳答案
为此将 PHP 放在一边。一旦 PHP 完成它的工作,您将拥有一个纯 HTML 页面,对吧?因此,像平常一样,JavaScript 只需要与 DOM 本身进行交互即可。
首先,我想将所有选择元素的选定选项存储在一个数组中。这样做可以让我在第一个和第二个颜色选择器中选择一个选项,并在第三个颜色选择器中禁用它们。
然后,只需迭代所有连接的选择(我已通过匹配的类连接它们),并在其中迭代所有选定的选项,并根据需要禁用它们。
听起来很简单,但确实是一个挑战。更大的挑战(但也仅此而已)可能是允许多重选择。
希望它有所帮助,如果需要更改,请告诉我。
// 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 ,以防万一。
编辑:您提到当选择由 AJAX 填充时这不起作用。你说得对,它没有按照写的那样工作。原因是,当页面加载后加载元素时,它不会自动连接到页面的当前监听器。相反,我更改了上面代码中附加监听器的位置。我没有像 $(".colorSelector").on("change"...)
那样监听,而是将其更改为 $("body").on("change", ".colorSelector", function(){...});
-- 请注意,监听器现在已附加到主体。这样做会导致任何具有 .colorSelector
类的元素被触发,无论它是最初存在的还是后来添加的。希望这有帮助!
关于javascript - 禁用相似下拉列表之间的选定选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47398175/