Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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.

<form name="myForm">
<select name="ingredientSelect" size="6">
<option>corn meal</option>
<option>corn bran</option>
<option>peanuts</option>
<option>honey</option>
<option>molasses</option>
<option>oat flour</option>
</select>
</form>

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 Java Script.

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.

document.myForm.ingedientSelect.options[0].text

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.

<script type="text/javascript">

function moveUp(form)
{
  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;
}

</script>

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.