Entry
How do I get all selected values from a SELECT MULTIPLE element?
How do I get all selected texts from a SELECT MULTIPLE element?
How do I get all selected indices from a SELECT MULTIPLE element?
Mar 12th, 2000 11:58
Martin Honnen,
You simply loop through the options array and collect the selected
options values or texts or indices. The following provides three
functions doing that and an example form with two example select
elements:
<HTML>
<HEAD>
<SCRIPT>
function getSelectedValues (select) {
var r = new Array();
for (var i = 0; i < select.options.length; i++)
if (select.options[i].selected)
r[r.length] = select.options[i].value;
return r;
}
function getSelectedTexts (select) {
var r = new Array();
for (var i = 0; i < select.options.length; i++)
if (select.options[i].selected)
r[r.length] = select.options[i].text;
return r;
}
function getSelectedIndices (select) {
var r = new Array();
for (var i = 0; i < select.options.length; i++)
if (select.options[i].selected)
r[r.length] = i;
return r;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<SELECT NAME="select1" MULTIPLE>
<OPTION VALUE="He who greps">Kibo
<OPTION VALUE="He who leaps">Allah
<OPTION VALUE="He who creeps">Jehovah
</SELECT>
<BR>
<INPUT TYPE="button" VALUE="show selected values"
ONCLICK="this.form.output.value = getSelectedValues
(this.form.select1);"
>
<INPUT TYPE="button" VALUE="show selected texts"
ONCLICK="this.form.output.value = getSelectedTexts
(this.form.select1);"
>
<INPUT TYPE="button" VALUE="show selected indices"
ONCLICK="this.form.output.value = getSelectedIndices
(this.form.select1);"
>
<BR>
<INPUT TYPE="text" NAME="output" SIZE="80">
<BR>
<SELECT NAME="select2" MULTIPLE
ONCHANGE="alert('Now selected: ' + getSelectedValues(this))"
>
<OPTION VALUE="Kibology">Kibology
<OPTION VALUE="Xibology">Xibology
<OPTION VALUE="Jerkianity">Jerkianity
<OPTION VALUE="Illame">Illame
</SELECT>
</FORM>
</BODY>
</HTML>
