DelphiFAQ Home Search:

Sorting a SELECT listbox in Javascript

 

comments45 comments. Current rating: 4 stars (25 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
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  
2019-05-14, 05:16:07
anonymous from Albania  
rating
Hello,

I can't believe that ThePornDude site is also selling prescription meds without any prescription! I've seen this: [url= https://theporndude...look]where can i buy viagra[/url] [url= https://theporndude...og/]viagra meme[/url] on this perv site. I said it before, its name is 'ThePornDude'. Quite weird web pages though. I am curious, why CIA are not after this weirdo with not working dick?

Keep updated!
2020-06-23, 21:11:13
Isis from United States  
rating
Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my
blog that automatically tweet my newest twitter updates.
I've been looking for a plug-in like this for quite some time and was hoping maybe
you would have some experience with something like this.
Please let me know if you run into anything. I truly enjoy reading your blog and
I look forward to your new updates.
2020-06-24, 22:41:33
Christena from Frankfurt Am Main, Germany  
rating
Having read this I thought it was very enlightening. I appreciate you spending some time and energy
to put this article together. I once again find myself personally spending a significant amount of time both reading and posting comments.

But so what, it was still worth it!
2020-07-01, 20:52:18
Lemuel  
rating
cenforce 150 mg for sale
2020-07-06, 21:45:27
Enriqueta  
rating
cvs male enhancement
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: