How to insert a string into a sorted SELECT listbox

Programming
C#
C++ (7)
Delphi (617)
Java (8)
JavaScript (31)
Document (8)
Events (8)
ExtJS (9)
Strings (3)
perl (9)
php (4)
VBScript (1)
Visual Basic (1)

Exchange Links

About this site

Links to us

See also:

Sorting a SELECT listbox in Javascript

New related comments
Number of comments in the last 48 hours

Reload a web page with a javascript function
1 new comments

How to insert a string into a sorted SELECT listbox

5 comments. Current rating: 4 stars

(1 votes). Leave comments and/ or rate it.

Question:

I have a sorted listbox and want to insert a new string without a complete resort.

Answer:

Use the javascript function shown below - pass the string that you want to insert as an argument. The name of the SELECT listbox is hard-coded in the script as 'mylist'.

Call it like this:
insertSortedLb('New Name')

The case is case sensitive and sorts alphabetically.
That means if you have numbers in the listbox, and these numbers include
10, 2, 300
then it will sort these numbers as
10, 2, 300
NOT as
2, 10, 300

function insertSortedLb(sVal) {
var lb = document.getElementById('mylist');

oOption = document.createElement("OPTION");
oOption.text = '';
oOption.value = '';
oOption.selected = false;
lb.options[lb.length] = oOption;

for(i=lb.length-1; i>0; i--)  {
  if (lb.options[i-1].text < sVal) {
    oOption = document.createElement("OPTION");
    oOption.text = sVal;
    oOption.value = sVal;
    oOption.selected = false;
    lb.options[i] = oOption;
    break;
  }
  else {
    lb.options[i].text = lb.options[i-1].text;
    lb.options[i].value = lb.options[i-1].value;
  }
} // for
} // end of insertSortedLb()

Send a message to
Subject

Comments:

2006-09-05, 18:56:58

anonymous from United Kingdom

try running this code with no items, one item, or two items - it doesn't work...

2006-10-05, 09:56:00

anonymous from Czech Republic

It didn't work for me at all, I wrote my own function (tested only in IE6):

function insertToSelectSorted(selectElement, text, value)
{
var foundIndex = selectElement.options.length;

for (i = 0; i < selectElement.options.length; i++)
{
if (selectElement.options(i).innerText.toLowerCase() > text.toLowerCase())
{
foundIndex = i;
break;
}
}

var oOption = document.createElement('OPTION');
selectElement.add(oOption, foundIndex);
oOption.innerText = text;
oOption.value = value;
}

2007-08-16, 14:12:58

anonymous from United States

Actually the above example is wrong in a couple places...

options(i) is not right, it must be options[i]

also, selectElement.add(x,y) is not valid, must do selectElement.options.add(x,y)

also, it's much easier to use new Option(text,value) than document.createElement('option') and then set text and value.

other than that... nice algorithm

function insertToSelectSorted(selectElement, text, value)
{
var foundIndex = selectElement.options.length;

for (i = 0; i < selectElement.options.length; i++)
{
if (selectElement.options[i].innerText.toLowerCase() > text.toLowerCase())
{
foundIndex = i;
break;
}
}

var oOption = new Option(text,value);
selectElement.options.add(oOption, foundIndex);

}

2007-09-04, 21:01:57

Justice from United States

This is a good script and very helpful, however if your list has non-English characters then you may get unexpected results. For example if your trying to insert 'Charlie' into the following list: {'Adam, 'Åsa', 'Bill', 'Dave'} the result will actually be {'Adam, 'Åsa', 'Charlie', 'Bill', 'Dave'} because the Å character is > C. Those pesky foreigners and their exotic letters...

2009-04-15, 01:41:04

anonymous from Canada

what you guy did only for IE,

here is alternative version

http://www.mredkj.c..l005.html

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:
Add a picture: 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.


	Search: