List box and Combo box are created using HTML <select> tag , by default browser renders <select> element as combo box
<html>
<head>
<title>List Boxes and Combo Boxes </title>
</head>
<body>
<script>
function listBoxMani()
{
var oListbox = document.getElementById("selAge");
alert(" oListbox based on Id "+ oListbox.options[oListbox.selectedIndex].getAttribute("value"));
oListbox = document.forms["form1"].selAge;
oListbox = document.forms[0].selAge
}
</script>
<form name="ListBoxes_form1">
<select name="selAge" id="selAge" onchange="listBoxMani();">
<option value="18-21">18-21
<option value="22-25">22-25
<option value="26-29">26-29
o<ption value="30-35">30-35
o<ption value="Over 35">Over 35
</select>
<select name="selAge1" id="selAge1" size="2">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over 35</option>
</select>
</form>
</body>
</html>
<select name="selAge" id="selAge" onchange="listBoxMani();">
<option value="18-21">18-21</option>
<option value="22-25">22-25 </option>
<option value="26-29">26-29 </option>
<option value="30-35">30-35 </option>
<option value="Over 35">Over 35 </option>
</select>
Here the above code render an combo box, The value attribute of each is used to determine the value for the control as a whole; the
selected option gives its value to the control (so it can be sent to the server).
<select name="selAge1" id="selAge1" size="2">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over 35</option>
</select>
If size (size="2") attributes is added means the above code will be rendered as list box , base on the size attribute items will be visible at the same time , for example the above code render only 2 items at once
Because both controls use the same HTML code, it’s possible to manipulate them using the same
JavaScript code. Naturally, the first step to manipulating either is to get a reference from the document
either by using document.getElementById() or accessing it in the document.forms collection:
oListbox = document.getElementById(“selAge”);
alert(" oListbox based on Id "+ oListbox.options[oListbox.selectedIndex].getAttribute("value"));
oListbox = document.forms[“ListBoxes_form1”].selAge;
oListbox = document.forms[0].selAge;
alert(" oListbox based on Id "+ oListbox.options[oListbox.selectedIndex].getAttribute("value"));
the above code gives the selected value
ps source: Wrox Professional JavaScriptTM for Web Developers
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment