基于第一个下拉列表中选择的价值乘数下拉菜单 [英] Multiple Drop-Down Menus Based on Selected Value of First Drop-Down
问题描述
我一直在寻找类似的问题，但他们是什么我期待的有点不同。
基本上，这就是我的目标来实现：
有充满值的第一个下拉列表，例如
＆LT;形式为GT;
＆LT;选择一个id =标签NAME =标签＆GT;
＆LT;期权价值=选择了代理=选择＆GT;代理＆LT; /选项＆GT;
＆LT;期权价值=扩展名＆GT;扩展名为LT; /选项＆GT;
＆LT;期权价值=文件版本＆GT;文件版本＆LT; /选项＆GT;
＆LT;期权价值=页面＆GT;页＆LT; /选项＆GT;
＆LT; /选择＆GT;
然后，在第二个下拉列表中，依赖于被选择的内容显示选项，例如，如果选择代理，运营商将是 = 或！= ，因为它是文本。对于文件版本会有4操作数， = ， = ，＆GT; <！/ code>和＆LT;
最后，会有第三个下拉带也取决于最初选定的选项值。
例如，代理被选中时，选项将是 PDF ，字， Excel中，百分点等和其他人就只是一个文本框键入在而不是穷尽所有可能的值。
在最后，这将被用来搜索数据库，但它是一个大的数据库和搜索的速度太慢，所以我想对选项的值将被存储在一个数组，而不是直接拉动。
正如你所看到的，这是相当棘手的。/在所有的任何帮助是非常AP preciated
谢谢，
马丁
编辑：
找到了答案对于那些谁碰巧寻找相同的答案：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENGT＆;
＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jQuery的-1.4.2.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / dropdown.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;形式为GT;
＆LT;选择一个id =标签NAME =标签＆GT;
＆LT;期权价值=选择=选择＆GT标签，标签和LT; /选项＆GT;
＆LT;期权价值=代理人＆GT;代理＆LT; /选项＆GT;
＆LT;期权价值=扩展名＆GT;扩展名为LT; /选项＆GT;
＆LT; /选择＆GT;＆LT;选择名称=操作数＆GT;
＆LT;选项＆GT;操作数和LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
dropdown.js：
$（文件）。就绪（函数（）{
$标签= $（选择[名称='标签']）;
$操作数= $（选择[名称='操作数']）;$ tags.change（函数（）{如果（$（本）.VAL（）==代理）{
$（选择[名称='操作数']选项），删除（）。
$（＆LT;选项＆GT; = LT; /选项＆gt;中）。appendTo（$操作数）;
$（＆LT;选项＆GT;！=＆LT; /选项＆gt;中）appendTo（$操作数）。
}如果（$（本）.VAL（）==扩展名）
{
$（选择[名称='操作数']选项），删除（）。
$（＆LT;选项＆GT;＆.PDF LT; /选项＆gt;中）。appendTo（$操作数）;
$（＆LT;选项＆GT;的.doc＆LT; /选项＆gt;中）。appendTo（$操作数）;
}如果（$（本）.VAL（）==标签）
{
$（选择[名称='操作数']选项），删除（）。
$（＆LT;选项＆GT;操作数和LT; /选项＆gt;中）。appendTo（$操作数）;
}}）;
}）;
尝试这样的事情，充满了相应的数据的数据对象。
VAR数据= {
代理：
[=，！=]，当选择了在第一下拉所示//值剂
[一，B]为示于第2下拉选择剂时//值
]
延期： [
[PDF，DOC]，当选择了在第一个下拉列表显示//值扩展
[C，D] //值是显示在第二下拉列表中选择时延长
]
}
和为HTML
＆LT;选择一个id =标签NAME =标签＆GT;
＆LT;期权价值=选择了代理=选择＆GT;代理＆LT; /选项＆GT;
＆LT;期权价值=扩展名＆GT;扩展名为LT; /选项＆GT;
＆LT;期权价值=文件版本＆GT;文件版本＆LT; /选项＆GT;
＆LT;期权价值=页面＆GT;页＆LT; /选项＆GT;
＆LT; /选择＆GT;＆LT;选择一个id =dropdown2NAME =dropdown2＆GT;
＆LT; /选择＆GT;＆LT;选择一个id =dropdown3NAME =dropdown3＆GT;
＆LT; /选择＆GT;
现在听标签上的下拉菜单的变化，并从数据对象的选项（例如使用jQuery）
$（＃标签）。改变（函数（）{
setDropDown1（数据[$（本）.VAL（）] [0]）;
setDropDown2（数据[$（本）.VAL（）] [1]）;
}）;
将数据传递给这样一个函数来创建下拉选项
函数setDropDown1（数据）{
$（＃dropdown1）的HTML（）。 //明确的选择
对于（VAR I = 0; I＆LT; data.length;我++）{
$（＃dropdown1）追加。（＆LT;期权价值='+数据[I] +'＆gt;中+数据[I] +＆LT; /选项＆GT;）;
}
}
I have been searching for similar questions but they are a little different to what I am looking for.
Basically, this is what I am aiming to implement:
Have a first drop-down list filled with values, e.g. :
<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>
Then, in a second drop-down list, show options dependant on what was selected, for example, if agent is selected, the operators would be = or != since it is text. For fileversion there would be 4 operands, =, !=, > and <.
Lastly, there would be a third drop-down with values also dependant on the initially selected option.
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 values.
In the end this will be used to search a database but it is a big db and the searches are too slow so I'm thinking the values for the options will be stored in an array rather than pulled directly.
As you can see, it's fairly tricky :/ any help at all is much appreciated.
Thanks, Martin
EDIT:
Found the answer for those who happen to be looking for the same answer:
<!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);
}
});
});
try something like this, a data object filled with the corresponding data..
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
]
}
and for the 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>
Now listen for changes on the tags dropdown and get the options from the data object (example using jquery)
$("#tags").change(function() {
setDropDown1(data[$(this).val()][0]);
setDropDown2(data[$(this).val()][1]);
});
pass the data to a function like this to create the dropdown options
function setDropDown1(data) {
$("#dropdown1").html(""); //clear options
for (var i = 0; i < data.length; i++) {
$("#dropdown1").append("<option value='" + data[i] + "'>" + data[i] + "</option>");
}
}
这篇关于基于第一个下拉列表中选择的价值乘数下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
