基于第一个下拉菜单的选定值的多个下拉菜单答案

【问题标题】：Multiple Drop-Down Menus Based on Selected Value of First Drop-Down基于第一个下拉菜单的选定值的多个下拉菜单
【发布时间】：2011-07-21 07:09:37
【问题描述】：

我一直在寻找类似的问题，但它们与我正在寻找的有点不同。

基本上，这就是我的目标：

有一个填充值的第一个下拉列表，例如：

<form>
<select id="tags" name="tags">
<option value="agent" selected="selected">agent</option>
<option value="extension">extension</option>
<option value="fileversion" >fileversion</option>
<option value="pages">pages</option>
</select>

然后，在第二个下拉列表中，根据所选内容显示选项，例如，如果选择了代理，则运算符将为 = 或 !=，因为它是文本。对于文件版本，将有 4 个操作数，=、!=、> 和 <。

最后，会有第三个下拉菜单，其值也取决于最初选择的选项。

For example, when agent is selected, the options would be pdf, word, excel, ppt etc. and others it would just be a text box to type in rather than exhaust all possible价值观。

最后这将用于搜索数据库，但它是一个大数据库，搜索速度太慢，所以我认为选项的值将存储在数组中，而不是直接拉取。

如您所见，这相当棘手：/ 非常感谢任何帮助。

谢谢，马丁

编辑：

为那些碰巧正在寻找相同答案的人找到答案：

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
</head>
<body>
<form>
<select id="tags" name="tags">
<option value="tags" selected="selected">tags</option>
<option value="agent">agent</option>
<option value="extension">extension</option>
</select>

<select name="operands">
<option>operands</option>
</select>
</form>
</body> 
</html>

dropdown.js：

$(document).ready(function() {
$tags = $("select[name='tags']");
$operands = $("select[name='operands']");

$tags.change(function() {

if ($(this).val() == "agent") {
$("select[name='operands'] option").remove();
$("<option>=</option>").appendTo($operands);
$("<option>!=</option>").appendTo($operands);
}

if ($(this).val() == "extension") 
{
$("select[name='operands'] option").remove();
$("<option>.pdf</option>").appendTo($operands);
$("<option>.doc</option>").appendTo($operands);
}

if ($(this).val() == "tags") 
{
$("select[name='operands'] option").remove();
$("<option>operands</option>").appendTo($operands);
}

});
});

【问题讨论】：

标签： php jquery html arrays drop-down-menu

【解决方案1】：

试试这样，一个数据对象填充相应的数据..

var data = {
  agent: [
    ["=", "!="], //values that are shown in 1st dropdown when agent is selected
    ["a", "b"] //values that are shown in 2nd dropdown when agent is selected
  ]
  extension: [
    ["pdf", "doc"], //values that are shown in 1st dropdown when extension is selected
    ["c", "d"] //values that are shown in 2nd dropdown when extension is selected
  ]
}

对于 HTML

<select id="tags" name="tags">
  <option value="agent" selected="selected">agent</option>
  <option value="extension">extension</option>
  <option value="fileversion" >fileversion</option>
  <option value="pages">pages</option>
</select>

<select id="dropdown2" name="dropdown2">
</select>

<select id="dropdown3" name="dropdown3">
</select>

现在监听标签下拉列表的变化并从数据对象中获取选项（使用 jquery 的示例）

$("#tags").change(function() {
  setDropDown1(data[$(this).val()][0]);
  setDropDown2(data[$(this).val()][1]);
});

将数据传递给这样的函数以创建下拉选项

function setDropDown1(data) {
  $("#dropdown1").html(""); //clear options
  for (var i = 0; i < data.length; i++) {
    $("#dropdown1").append("<option value='" + data[i] + "'>" + data[i] + "</option>");
  }
}

【讨论】：

谢谢，但下降似乎在选择值时似乎没有填充。注意。我确实将 html 中的 dropdown2 和 dropdown3 更改为 operators 和 values 并且您的 JS 中的相同值不太匹配 - 可能是错字，但我将 setDropDown1 和 setDropDown2 更改为 @987654332 @ 和 setValues 以及类似的功能，setOperators、#operators 等。
你能把代码放在某个地方让我看到吗？ jsfiddle.net？我没有测试它，但它应该像这样工作。
嗨，恢复到您发布的代码并稍作调整：jsfiddle.net/ydPfH/2

【解决方案2】：

var selectionObject = {
agent = ["=","!="],
fileversion = ["=","!=",">","<"],
...
}

$('form select#tags').click(function(){
comboBoxSelection = $(this).val();
secondDropDownvalues = selectionObject[comboBoxSelection];
....
});

在伪代码中应该是这样的

【讨论】：

谢谢，但您的伪代码没有解释如何使用额外的下拉菜单。