DelphiFAQ Home Search:

Sorting a SELECT listbox in Javascript

 

comments41 comments. Current rating: 5 stars (20 votes). Leave comments and/ or rate it.

Question:

What is the best way to sort a SELECT list box in Javascript?

Answer:

The following example assumes that your text and value tags are the same. In this case you can build an array of all the texts, use Javascript's built-in sort() function and the update the listbox.
You don't even need to clear the listbox and then populate it again (which would be slower and possibly cause flickering). Instead you can update each entry directly.

See the script live here (click on "Sort" below the list):

<script language="JavaScript" type="text/javascript">
function sortlist() {
var lb = document.getElementById('mylist');
arrTexts = new Array();

for(i=0; i<lb.length; i++)  {
  arrTexts[i] = lb.options[i].text;
}

arrTexts.sort();

for(i=0; i<lb.length; i++)  {
  lb.options[i].text = arrTexts[i];
  lb.options[i].value = arrTexts[i];
}
}
</script>


<form action="#">
<select name=mylist id=mylist size=5>
<option value="Anton">Anton
<option value="Mike">Mike
<option value="Peter">Peter
<option value="Bill">Bill
<option value="Carl">Carl
</select>
<br>
<a href="javascript:sortlist()">sort</a>
</form>

Content-type: text/html

Comments:

You are on page 3 of 3, other pages: 1 2 [3]
2009-06-11, 08:50:30
anonymous from Australia  
Not sure what you are all on about why rewrite the entire list values when you can just write the optons. it will sort on text but simple mod would allow to sort on numeric values or mods. Also preservs the selected option when sorting multiple select list because you are simple moving the options not all of the optioin data as individual parts. basic rule if you can handle the object donr manhandle the the data

function sortOptions(optionList){
var arrToSort = new Array();
for(i = 0; i < optionList.length; i++){
arrToSort[i] = new Array();
arrToSort[i][0] = optionList.options[i].text;
arrToSort[i][1] = optionList.options[i];
}

arrToSort.sort();

optionList.length = 0;
for(i = 0; i < arrToSort.length; i++){
optionList.options.add(arrToSort[i][1]);
}
}
2009-08-24, 15:12:16
trunx from Brazil  
rating
This will keep the right values for each line, and is also case insensitive... you just gotta call the function like: sortlist(document.getElementById(fieldID))

function sortlist(lb) {
arrTexts = new Array();
for(i=0; i<lb.length; i++) {
arrTexts[i] = lb.options[i].text+':'+lb.options[i].value;
}
arrTexts.sort(charOrdA);
for(i=0; i<lb.length; i++) {
el = arrTexts[i].split(':');
lb.options[i].text = el[0];
lb.options[i].value = el[1];
}
}
function charOrdA(a, b) {
a = a.toLowerCase();
b = b.toLowerCase();
if (a>b) return 1;
if (a <b) return -1;
return 0;
}
2009-09-22, 01:53:00
rh@hofercomputing.ch from Switzerland  
rating
special thanks to 'hidden' from germany
2010-03-30, 01:02:54
anonymous from Canada  
<HTML>
<head>

<title> yo yo </title>

<SCRIPT LANGUAGE='JAVASCRIPT'>

</SCRIPT>
</head>

</HTML>

<body>

<TABLE border=1>
<tr>
<FORM name='myForm'>
<SELECT name='Ramm' onchange='CheckDisplay()'>
<OPTION SELECT> NO PRICE
<OPTION SELECT> 4 GIG add $56
<OPTION SELECT> 8 GIG add $500
<OPTION SELECT> 16 GIG add $1000
</SELECTED>
</tr>
<SELECT name='Diskk' onchange='CheckDisplay()'>
<OPTION SELECT> NO PRICE
<OPTION SELECT> 56 GIG HARD DRIVE add $567
<OPTION SELECT> 140 GIG HARD DRIVE add $5467
<OPTION SELECT> 4567 GIG HARD DRIVE add $678
</SELECT>
</tr>
<tr>
<SELECT name='Commm' onchange='CheckDisplay()'>
<OPTION SELECT> NO PRICE
<OPTION SELECT> 356
<OPTION SELECT> 467    
<OPTION SELECT&g4675
</SELECT>
</tr>
<tr>
<tr>
&
<INPUT TYPE='text' value='' name='kyle'>
</tr>
<tr>
<INPUT TYPE='button' value='Calc' name='calonclick= 'CheckDisplay()'>
</tr>
</FORM>
<</BODY>
</HTML>
2011-10-13, 02:38:48
anonymous from New Delhi, India  
rating
2011-12-19, 01:47:28
anonymous  
ad
bc
cd
de
ef
fg
gh
hi
ij
jk
kl
2012-12-19, 00:10:10
anonymous  
[url= http://www.wonderfu..tml]ibeats earphones[/url] is characterized by its solid housing,sllyjfdibeats balanced sound quality and purest sound producing. Monster Ibeats have Solid metal housing resists vibrations for purest sound without sonic side effects ControlTalk on-cable mic for convenient hands-free calling with iPhones and smartphones ControlTalk track seeking capabilities without touching your iPod or music phone. This [url= http://www.wonderfu..tml]ibeats earphones[/url] unlike ordinary in-ear headphones,ibeats earphones are constructed from solid metal housing.With the [url= http://www.hotmusic..html]beats by dre mixr[/url], you can freely enjoy the beautiful music without being disturbed by the outside noise.We supply all kinds of beautiful Monster [url= http://www.wonderfu..com/]Beats by dre[/url], such as ibeats earphones,[url= http://www.wonderfu...html]solo hd bluetooth[/url],[url= http://www.hotmusic..com/]beats studio headphones[/url] and [url= http://www.hotmusic..om/]purple beats by dre[/url]
2015-02-01, 08:11:54
anonymous from Venezuela  
Boom shkaklaaa boom boom, problem solved.
2017-01-29, 06:03:13
anonymous from Ukraine  
rating
I can record now and I would preffer a trombone or baritone part so email me if you can use me
2017-11-22, 07:37:25
Anglea from Brazil  
rating
I have checked your blog and i've found some duplicate content,
that's why you don't rank high in google's search results,
but there is a tool that can help you to create 100% unique articles,
search for; Boorfe's tips unlimited content
2017-11-27, 19:42:30
anonymous from Indonesia  
Kami sekelurga mengucapkan banyak trimah kasih kpada AKI NUGROHO atas bantuanya no 4d (3569) benar2 tembus 100% bila mau bukti hubungi AKI NUGROHO di nmr ini ;0821=9802=3183; Trma ksh....
This image was also posted here:
Reload a web page with a javascript function
Reload a web page with a javascript function



Keywords:
You are on page 3 of 3, other pages: 1 2 [3]

 

 

NEW: Optional: Register   Login
Email address (not necessary):

Rate as
Hide my email when showing my comment.
Please notify me once a day about new comments on this topic.
Please provide a valid email address if you select this option, or post under a registered account.
 

Show city and country
Show country only
Hide my location
You can mark text as 'quoted' by putting [quote] .. [/quote] around it.
Please type in the code:

Please do not post inappropriate pictures. Inappropriate pictures include pictures of minors and nudity.
The owner of this web site reserves the right to delete such material.

photo Add a picture: