javascript show hide select from
I am trying to show another selection from when the user selects a selection from, for example if user selects products then another selection box appears with product types. Here is my code
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>TestPage</title>
<script type="text/javascript">
开发者_开发知识库function ProductSelection() {
var selectedValue = document.getElementById("internet").value;
if(selectedValue == "Matchcode")
document.getElementById("Types").style.display = "";
if(selectedValue == "Kaleidoscope")
document.getElementById("Kaleidoscopes").style.display = "";
}
</script>
</head>
<body>
<table align="center">
<form id="form1" name="form1" method="post" action="process.php">
<tr><td>Products</td>
<td>
<select name="Products" id="Products" onChange="ProductSelection();">
<option>Select a product....</option>
<option value="Matchcode">Matchcode</option>
<option value="Nearcode">Nearcode</option>
<option value="Kaleidoscope">Kaleidoscope Plus</option>
<option value="Kaleidoscope">Matchcode Kaleidoscope</option>
</select>
</td>
</tr>
<tbody id="Types" style="display:none">
<tr><td>Type:</td>
<td><select name="Types" id="Types" title="Types">
<option value="UK">UK</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="DNB">DNB</option>
<option value="Names">Names</option>
</select></td></tr></tbody>
<tbody id="Kaleidoscopes" style="display:none">
<tr><td>Type:</td>
<td><select name="Kaleidoscopes" id="Kaleidoscopes" title="Kaleidoscopes">
<option value="New Zealand">New Zealand</option>
</select>
</td></tr></tbody>
<tr><td>Computers:</td>
<td>
<select name="Computers" id="Computers" title="Computers">
<option value="QA-N1">QA-N1</option>
<option value="QA-N2">QA-N2</option>
</select>
</td></tr>
<tr>
<td>Keys:</td>
<td> <input name="Key" type="text" title="Key" />
<input type="submit" name="Save" id="Save" value="Save"/>
</td>
</tr>
</form></table>
</body>
</html>
I would change your script to be like this:
function ProductSelection(el) {
var selectedValue = el.value;
if(selectedValue == "Matchcode")
document.getElementById("Types").style.display = "";
if(selectedValue == "Kaleidoscope")
document.getElementById("Kaleidoscopes").style.display = "";
}
And change your input to be:
<select name="Products" id="Products" onChange="ProductSelection(this);">
That way, you have a reference to the element itself. Before you were trying to get an element with an ID of internet which didn't exist.
I think your after something like this
<select name="Products" id="Products" onChange="ProductSelection(this);">
function ProductSelection(element) {
var selectedValue = element.value
if(selectedValue == "Matchcode") {
document.getElementById("Types").style.display = "inline";
document.getElementById("Kaleidoscopes").style.display = "none";
//hide other elements that need to be hidden;
}
if(selectedValue == "Kaleidoscope") {
document.getElementById("Kaleidoscopes").style.display = "inline";
document.getElementById("Types").style.display = "none";
//hide other elements that need to be hidden;
}
if(selectedValue == "Nearcode") {
document.getElementById("Kaleidoscopes").style.display = "none";
document.getElementById("Types").style.display = "none";
//hide other elements that need to be hidden;
}
}
加载中,请稍侯......
精彩评论