Select Box with Options

Krijn Hoetmer Nov 10, 2006

General

Use this script to easily change the order of options in a select box. You can see the order change as it happens in the "New Order" box. (The input can be hidden and used to change the order on the server side.)

Notes

Created by: Krijn Hoetmer
Web Site: http://krijnhoetmer.nl/
Posted: November 10, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: selectBoxOptions.js

// Krijn Hoetmer ~ http://krijnhoetmer.nl/
// Paul Gration ~ http://i-labs.co.uk/

function moveUp(element) {
  for(i = 0; i < element.options.length; i++) {
    if(element.options[i].selected == true) {
      if(i != 0) {
        var temp = new Option(element.options[i-1].text,element.options[i-1].value);
        var temp2 = new Option(element.options[i].text,element.options[i].value);
        element.options[i-1] = temp2;
        element.options[i-1].selected = true;
        element.options[i] = temp;
      }
    }
  }
}
function moveDown(element) {
  for(i = (element.options.length - 1); i >= 0; i--) {
    if(element.options[i].selected == true) {
      if(i != (element.options.length - 1)) {
        var temp = new Option(element.options[i+1].text,element.options[i+1].value);
        var temp2 = new Option(element.options[i].text,element.options[i].value);
        element.options[i+1] = temp2;
        element.options[i+1].selected = true;
        element.options[i] = temp;
      }
    }
  }
}
function updateList(list, textBox) {
  textBox.value = '';
  for(i = 0; i < list.options.length; i++) {
    if (i == 0) {
      textBox.value += list.options[i].value;
    } else {
      textBox.value += ',' + list.options[i].value;
    }
  }
}
function swap(list) {
  var j = 0;
  for(i = 0; i < list.options.length; i++) {
    if(list.options[i].selected == true) {
      j++;
      switch (j) {
        case 1:
        var i1 = i;
        var temp = new Option(list.options[i].text, list.options[i].value);
        break;
        case 2:
        var i2 = i;
        var temp2 = new Option(list.options[i].text, list.options[i].value);
        break;
      }
    }
  }
  if (j != 2) {
    alert('Only 2 items can be swapped');
  } else {
    list.options[i1] = temp2;
    list.options[i1].selected = true;
    list.options[i2] = temp;
    list.options[i2].selected = true;
  }
}

window.onload = function() {
 updateList(document.getElementById('move'), document.getElementById('newList'));
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="selectBoxOptions.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form action="#" method="post">
  <dl>
    <dt><strong>Options:</strong></dt>
      <dd>
       <select id="move" multiple="multiple" size="10">
        <option value="1">option 1</option>
        <option value="2">option 2</option>
        <option value="3">option 3</option>
        <option value="4">option 4</option>
        <option value="5">option 5</option>
        <option value="6">option 6</option>
        <option value="7">option 7</option>
        <option value="8">option 8</option>
        <option value="9">option 9</option>
        <option value="10">option 10</option>
       </select>
      </dd>

    <dt><strong>Order:</strong></dt>
      <dd><input type="button" onclick="moveUp(document.getElementById('move'));updateList(document.getElementById('move'), document.getElementById('newList'));" value="Move Up"></dd>
      <dd><input type="button" onclick="moveDown(document.getElementById('move'));updateList(document.getElementById('move'), document.getElementById('newList'));" value="Move Down"></dd>
      <dd><input type="button" onclick="swap(document.getElementById('move'));updateList(document.getElementById('move'), document.getElementById('newList'));" value="Swap 2 Options"></dd>
    <dt><br><strong>New order:</strong> <input type="text" id="newList" name="newList" value="" readonly="readonly" style="border: none;"></dd>
      <dd>(This input can be hidden and used to change the order server side)</dd>
  </dl>
</form>

Leave a Response

(8 comments)

You might re-check your script. It works fine for me using Firefox 2.0.0.14.

Lee Jun 26, 2008

It works fine for me in Firefox. If you need additional help, you'll need to post your question [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]over on the forums[/a].

Lee Jun 26, 2008

The code works excellent for IE, but not for Mozilla Firebfox. Anyone knows why?

Tony Mar 28, 2008

This is very simple script and it does not work when there are more elements then user can see at the same time (there is vertical scrall bar). In FF it does not scrall down to the selected element, it just selectes it but scralls list box to the top :(

Delphi Jan 16, 2008

the code is very nice and useful

surya Jan 29, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details