How to Dynamically Change Listbox With Javascript

Written by michael carroll
  • Share
  • Tweet
  • Share
  • Email

The select tag in HTML is normally used to create a drop-down menu. However, if you adjust its size attribute, the select tag creates a listbox. A listbox is an interface with a list of options that the user can select from by clicking them. Javascript's powerful access to the HTML Document Object Model, or DOM, allows you to dynamically change a listbox element after the page has loaded so that you can programmatically select, add and remove items from it based on user input.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Add the following JavaScript code between the head tags of your HTML document:

    <script type="text/javascript">

    function select Item(ref,index){

    document.getElementById(ref).selected Index = index;

    }

    </script>

    This function takes two arguments: a reference to the id attribute of the listbox that should be changed, and the number of the item to select. Note that the items are numbered starting at 0, so to select the first item of a listbox with the id "lbox," you should call the function this way:

    select Item("lbox",0);

  2. 2

    Add the following function between the script tags in the head of your HTML document to add items to a listbox:

    function add Item(ref,name,index){

    ref = document.getElementById(ref);

    var newopt=document.createElement("option");

    newopt.text=name;

    ref.add(newopt,ref.options[index]);

    ref.size=ref.options.length;

    }

    The "ref" argument is, as before, the id of the listbox. "Name" is the name of the new option to add. The "index" argument is optional -- if you supply the function a number for it, the new item will be inserted at the index you specify. Otherwise, the item will appear at the end of the listbox. The last line of the function resizes the list to make sure all of the options fit. If you want your listbox to stay at a fixed height, remove this line.

  3. 3

    Place the following function between the script tags to remove items from a listbox:

    function remove Item(ref,index){

    ref = document.getElementById(ref);

    ref.remove(index);

    ref.size=ref.options.length;

    }

    As with "add Item," if you intend to keep your listbox at a fixed height, remove the final line of this function.

  4. 4

    Add the following code to the body of your HTML document to test out these functions. Don't worry about details like the "parseInt" method, just pay attention to the way the functions are called from the "input" elements.

    <select id="lbox" size="3">

    <option>Item One</option>

    <option>Item Two</option>

    <option>Item Three</option>

    </select>

    Input text or index:

    <input id="input" type="text" />

    <input type="button" value="Select by Index" on Click="selectItem('lbox',parseInt(document.getElementById('input').value));" />

    <input type="button" value="Add Item" on Click="addItem('lbox',document.getElementById('input').value);" />

    <input type="button" value="Remove Item at Index" on Click="removeItem('lbox',parseInt(document.getElementById('input').value));" />

  5. 5

    Save your HTML document, open it in a Web browser and use the controls to dynamically change the listbox. You can change different listboxes using the same functions by assigning each listbox its own unique id attribute, then using the respective ids when you call the functions.

Tips and warnings

  • You can also add and remove optgroup elements to a listbox using the add method.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.