dsxpt62448 2011-03-23 12:46
浏览 18
已采纳

基于首次下拉选择值的多下拉菜单

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

});
});
  • 写回答

2条回答 默认 最新

  • douyao7390 2011-03-23 13:12
    关注

    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>");
  }
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟，应力应变曲线问题
  • ¥30 python代码，帮调试
  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿