Java Script Code to Re-arrange Items in a Select List
By Stephen Bucaro
In this article you'll learn how to use Java Script to re-arrange items in a select list.
I'll explain the code in detail so that you'll be able to fully understand and modify it
for your own use. The first thing we'll need to do is create the html code for a select
list. Shown below is the basic code for an html select list.
<select name="ingredientSelect" size="6">
Here's a few things to note: The select list is contained within <form> </form>
tags. A select list is a form control. The form needs a name attribute name="myForm"
in order to access it with Java Script. All the select list's options are within <select>
</select> tags. The select list also needs a name attribute in order to access it with
Note the size attribute in the <select> tag. If you have many options in the
list you might want to set size to less than the number of options. That will cause
the select list to have a scrollbar. If you set size to 1, the select list will become
a drop down list.
Now we are ready to start working with Java Script. As a preliminary, lets answer the question
"how do you access items in select list?". The Java Script statement below shows how to do that.
In the Java Script statement shown above we use dot notation to access the document
object's form element named "myForm", the form's select element named "ingedientSelect",
the select element's option with the index 0, and we're accessing its text property.
The next thing we'll need is to add buttons to the form to allow the user to move a selected item
up or down in the select list. The code for the buttons is shown below.
<input type="button" value="▲" onclick="moveUp(this.form)">
<input type="button" value="▼" onclick="moveDn(this.form)">
In the code shown above, the value attributes defines the button's label, in this case it's
the unicode character codes for black up-pointing ▲ and black down-pointing ▼ arrows.
The onclick event in the button with the up-pointing arrow calls a Java Script function named
moveUp, passing it the form element's data. The onclick event in the button with the
down-pointing arrow calls a Java Script function named moveDn, passing it the form element's data.
var item1 = form.ingredientSelect.options[form.ingredientSelect.selectedIndex].text;
// don't move blanks
if(item1 == "") return false;
// don't move if top item selected
var i = form.ingredientSelect.selectedIndex
if(i == 0) return false;
// get the item above the selected one
var item2 = form.ingredientSelect.options[i - 1].text;
// move selected item up
form.ingredientSelect.options[i - 1].text = item1;
// move above item down
form.ingredientSelect.options[i].text = item2;
// move selection
form.ingredientSelect.selectedIndex = i - 1;
The code for the Java Script moveUp function is shown above. You should place this Java
Script code block within the head section of your webpage. Lets go over this code line-by-line.