我一直在寻找类似的问题,但它们与我正在寻找的有点不同。
基本上,这就是我的目标:
让第一个下拉列表中包含值,例如:
<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>
然后,在第二个下拉列表中,显示取决于所选内容的选项,例如,如果选择了代理,则运算符将为=
或!=
,因为它是文本。对于fileversion,将有4个操作数,=
,!=
,>
和<
。
最后,还会有第三个下拉值,其值也取决于最初选择的选项。
例如,当选择代理时,选项将是pdf
,word
,excel
,ppt
等等,而其他选项则只是{{1键入而不是耗尽所有可能的值。
最后这将用于搜索数据库,但它是一个大数据库,搜索速度太慢,所以我认为选项的值将存储在数组中,而不是直接拉出。
正如你所看到的,它非常棘手:/任何帮助都非常受欢迎。
谢谢, 马丁
编辑:
找到那些正在寻找相同答案的人的答案:
text box
dropdown.js:
<!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>
答案 0 :(得分:1)
var selectionObject = {
agent = ["=","!="],
fileversion = ["=","!=",">","<"],
...
}
$('form select#tags').click(function(){
comboBoxSelection = $(this).val();
secondDropDownvalues = selectionObject[comboBoxSelection];
....
});
伪代码应该是那样的
答案 1 :(得分: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>");
}
}