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

问题描述：

我一直在寻找类似的问题，但它们与我所寻找的有点不同。基于第一下拉选定值的多个下拉菜单

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

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

<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个操作数，=,!=,>和<。

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

例如，被选择剂时，该选项将是pdf，word，excel，ppt等和其他这纯粹是一个text box在类型，而不是排气所有可能的值。

最后这将用于搜索数据库，但它是一个大的分贝，搜索速度太慢，所以我想这些选项的值将存储在一个数组中，而不是直接拉取。你可以看到，这相当棘手：/任何帮助都非常感谢。

感谢，马丁

编辑：

找到了答案，对于那些谁碰巧寻找相同的答案：

<!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); 
} 

}); 
});

答

尝试这样的事情，充满了对应的数据的数据对象..

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更改为setOperators '和'setValues'以及类似的函数，'setOperators'，'＃operators'等。 – martincarlin87 2011-03-23 13:25:25

你能把代码放在什么地方吗？ jsfiddle.net？我没有测试它，但它应该像这样工作。 – 2011-03-23 13:50:07

嗨，恢复到您发布的代码，只需稍作调整： http://jsfiddle.net/ydPfH/2/ – martincarlin87 2011-03-23 14:04:16

答

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

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

在伪代码应该是类似的东西

感谢，但你的伪代码没有解释如何使用额外的下拉菜单。 – martincarlin87 2011-03-23 14:11:04

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

相关推荐