<html>
<head>
<title>List Boxes Selection </title>
</head>
<body>
<script>
var ListUtil = new Object();
function listBoxMani()
{
alert(" listBoxMani() ");
var oListbox = document.getElementById("selAge");
alert(" oListbox "+ ListUtil.getSelectedIndexes(oListbox));
}
ListUtil.getSelectedIndexes = function (oListbox)
{
var arrIndexes = new Array;
for (var i=0; i < oListbox.options.length; i++)
{
if(oListbox.options[i].selected)
{
arrIndexes.push(i);
}
}
return arrIndexes;
};
</script>
<form name="ListBoxes_form1">
<select name="selAge" id="selAge" size="2" multiple="multiple">
<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>
<input type="button" value="getSelectedIndex" onClick="listBoxMani();">
</form>
</body>
</html>
Retrieving the selected option(s)
selectedIndex is an attribute of <select> element which contains the index of selected Index, as we previously saw oListbox.selectedIndex
If selection box type is list box ( list box by setting the multiple attribute of the <select/> element to "multiple") ( not for combo box )means it is possible to select more than one option
if multiple options are selected , by using oListbox.selectedIndex we can get only the first selected item , but that really doesn’t help.
What we need is a way to get the index of all the selected options ,to get the index writing an custom method will solve all the problem
For this, you need a custom method, which is the first for the ListUtil object. The getSelectedIndexes() method takes advantage of another special property of the element: the selected property
The HTML DOM defines the selected property as a Boolean value indicating whether the individual option is selected. So, all that is necessary is to loop through the options of a list box and test to see if they are selected or not. If so, you need to save that index into an array that will ultimately hold the indices of all selected options. This method needs only one argument, the list box to check:
The getSelectedIndexes() method can then be used to either retrieve the indexes of the selected
options or, using the length of the returned array, to determine how many options are selected:
var oListbox = document.getElementById("selListbox");
var arrIndexes = ListUtil.getSelectedIndexes(oListbox);
alert("There are " + arrIndexes.length + "option selected." + "The options have the indexes " + arrIndexes + ".");
This code first gets a reference to the list box with the ID "selListbox" and then retrieves the selected indexes and stores them in arrIndexes. The alert displays the a message indicating the number of selected options as well as displaying their indexes (remember, the toString() method of an Array object returns all items in a comma-separated string).
Monday, November 7, 2011
List Boxes and Combo Boxes 1
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
<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:
Posts (Atom)
