Multiple Drop-Down Menus Based on Selected Value of First Drop-Down
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($operand开发者_如何学JAVAs);
$("<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>");
}
}
var selectionObject = {
agent = ["=","!="],
fileversion = ["=","!=",">","<"],
...
}
$('form select#tags').click(function(){
comboBoxSelection = $(this).val();
secondDropDownvalues = selectionObject[comboBoxSelection];
....
});
In pseudo code should be something like that
加载中,请稍侯......
精彩评论