Entry
How can I sort the options in a select?
how can group string of 80 chars in listbox based on selected item in other dropdownbox .
Jun 27th, 2000 15:58
Martin Honnen, Raghu ram,
First decide what your sort criteria is, the value or the text of the
options, and whether to compare strings or numbers. Then copy all
options in an array, call its sort method with an adequate compare
function and reinsert the options in the select.
Here is code that does that together with four examples. The sort
function by default compares the text properties of the options as
strings but comparison as numbers is shown too:
<HTML>
<HEAD>
<SCRIPT>
function compareText (option1, option2) {
return option1.text < option2.text ? -1 :
option1.text > option2.text ? 1 : 0;
}
function compareValue (option1, option2) {
return option1.value < option2.value ? -1 :
option1.value > option2.value ? 1 : 0;
}
function compareTextAsFloat (option1, option2) {
var value1 = parseFloat(option1.text);
var value2 = parseFloat(option2.text);
return value1 < value2 ? -1 :
value1 > value2 ? 1 : 0;
}
function compareValueAsFloat (option1, option2) {
var value1 = parseFloat(option1.value);
var value2 = parseFloat(option2.value);
return value1 < value2 ? -1 :
value1 > value2 ? 1 : 0;
}
function sortSelect (select, compareFunction) {
if (!compareFunction)
compareFunction = compareText;
var options = new Array (select.options.length);
for (var i = 0; i < options.length; i++)
options[i] =
new Option (
select.options[i].text,
select.options[i].value,
select.options[i].defaultSelected,
select.options[i].selected
);
options.sort(compareFunction);
select.options.length = 0;
for (var i = 0; i < options.length; i++)
select.options[i] = options[i];
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<SELECT NAME="select1">
<OPTION VALUE="Netscrap">Netscrap
<OPTION VALUE="Lavaloft">Lavaloft
<OPTION VALUE="Microsnot">Microsnot
</SELECT>
<INPUT TYPE="button" VALUE="sort"
ONCLICK="sortSelect(this.form.select1)"
>
<BR>
<SELECT NAME="select4" SIZE="3">
<OPTION VALUE="Netscrap">Netscrap
<OPTION VALUE="Lavaloft">Lavaloft
<OPTION VALUE="Microsnot">Microsnot
</SELECT>
<INPUT TYPE="button" VALUE="sort"
ONCLICK="sortSelect(this.form.select4, compareValue)"
>
<BR>
<SELECT NAME="select2" SIZE="3">
<OPTION>2.1
<OPTION>1.6
<OPTION>0.4
</SELECT>
<INPUT TYPE="button" VALUE="sort"
ONCLICK="sortSelect(this.form.select2, compareTextAsFloat)"
>
<BR>
<SELECT NAME="select3" SIZE="3">
<OPTION VALUE="3.6">3.6
<OPTION VALUE="1.2">1.2
<OPTION VALUE="5.1">5.1
<OPTION VALUE="0.3">0.3
<OPTION VALUE="2.3">2.3
<OPTION VALUE="3.3">3.3
</SELECT>
<INPUT TYPE="button" VALUE="sort"
ONCLICK="sortSelect(this.form.select3, compareValueAsFloat)"
>
</FORM>
</BODY>
</HTML>
Note that the above code produces different results on different
browsers regarding the preservation of the selected option(s).
