Create a Dynamic Web Page List with Javascript

Web page lists are userful, but they're static - a web page programmer can make them dynamic by adding some Javascript programming.

Lists are a very simple, but very effective, way of displaying information on a web page and, rather than having a static list, the web programmer can create a dynamic list - just by adding an empty list and a little Javascript code.

Adding an Empty List to a Web Page

Web page lists come in two formats:

1. ordered lists
2. unordered lists

and the HTML code to create either kind of list is very similar; the code to create an empty ordered list is:

<ol></ol>

and the code to create an empty unordered list is:

<ul></ul>

The Javascript code to populate the lists will work with either type of list - but a unique id must be assigned to the list, for example:

<ol id="list_moons"></ol>

The next step is to write the code that will add the items to the list.

Using Javascript to Add Items to a List

The code for the list creation will:

• add individual items to a list
• clear a list
• populate a list from an array

And for this three Javascript functions will be required.

Adding a Single Item to a List

The function for adding an item to a list requires the id of the list and some text as an input - it then appends a new LI object to the list (which is itself another object on the web page):

function add_li(list, text) {
var list = document.getElementById(list);
var li = document.createElement("li");
li.innerHTML = text;
list.appendChild(li);
}

This could be run with the following Javascript code:

add_li("list_moons", "The Moon");

and that would add a single item to the empty list.

Populating a List from an Array

Rather than adding the items one by one it may be more efficient to load the items from an array - this next function takes an array as an input and loops through it, adding items to the list using the function above:

function load_list(list, list_array) {
for (var i = 0; i < list_array.length; i++) {
add_li (list, list_array[i]);
}
}

An array is required in order to run this, for example:

var mars_moons = new Array ("Phobos", "Deimos");
load_list("list_moons",mars_moons);

This time two items would be added to the list.

Clearing a List

Since the list is to be dynamic it will have to be cleared before a new list is created - this next function loops, deleting items until there are no items left:

function clear_list (list) {
var list = document.getElementById(list);
while( list.hasChildNodes() ) {
list.removeChild( list.lastChild );
}
}

and it would run by adding the Javascript code:

clear_list("list_moons");

That's all the functionality that's required to make a list dynamic - however, some more code is required that will make the changes actually happen.

Using a Select Box to Change a List

In this example a change in the selection of a drop-down list box (or combo-box) will cause the list to be updated - therefore a suitable drop-down list box is required:

<select id=sel_planet>
<option>Mercury</option>
<option>Venus</option>
<option>Earth</option>
<option>Mars</option>
</select>

The list is to be updated whenever the selection in the combo-box changes - therefore a function has to be assigned to the box's onchange event:

document.getElementById('sel_planet').onchange = sel_planet_onchange;

Finally the subroutine is required that will load the appropriate list according to the selection made in the drop-down list box:

function sel_planet_onchange () {
clear_list("list_moons");
switch (sel_planet.selectedIndex) {
case 2: //Earth
add_li("list_moons", "The Moon");
break;
case 3: //Mars
load_list("list_moons",mars_moons);
break;
default:
add_li("list_moons", "No Moons");
}
}
</script>

Now the list will now change whenever the web page user changes the selection in the combo-box.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---