<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).
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment