Every once in a while we have to deal with lists on web pages. In HTML terms, lists are <SELECT> fields. There are some common tasks used to manipulate lists that we'll cover in a couple of tips. This tip talks about adding items to the field dynamically and removing items from the field dynamically using JavaScript.

Adding an item to a list is a pretty straightforward function:

function addToList(listField, newText, newValue) {
   if ( ( newValue == "" ) || ( newText == "" ) ) {
      alert("You cannot add blank values!");
   } else {
      var len = listField.length++; // Increase the size of list and return the size
      listField.options[len].value = newValue;
      listField.options[len].text = newText;
      listField.selectedIndex = len; // Highlight the one just entered (shows the user that it was entered)
   } // Ends the check to see if the value entered on the form is empty
}

The comments within the code should explain what's going on. To summarize, you pass in a handle to a field, then some new text (that the user will see) and a new value (that will be submitted with the form if selected) and as long as neither the text nor the value are blank, the new entry is added to the bottom of the list field and then that value is highlighted for the user.

To remove an element from a list, the code is a bit longer, but still not that difficult:

function removeFromList(listField) {
   if ( listField.length == -1) {  // If the list is empty
      alert("There are no values which can be removed!");
   } else {
      var selected = listField.selectedIndex;
      if (selected == -1) {
         alert("You must select an entry to be removed!");
      } else {  // Build arrays with the text and values to remain
         var replaceTextArray = new Array(listField.length-1);
         var replaceValueArray = new Array(listField.length-1);
         for (var i = 0; i < listField.length; i++) {
            // Put everything except the selected one into the array
            if ( i < selected) { replaceTextArray[i] = listField.options[i].text; }
            if ( i > selected ) { replaceTextArray[i-1] = listField.options[i].text; }
            if ( i < selected) { replaceValueArray[i] = listField.options[i].value; }
            if ( i > selected ) { replaceValueArray[i-1] = listField.options[i].value; }
         }
         listField.length = replaceTextArray.length;  // Shorten the input list
         for (i = 0; i < replaceTextArray.length; i++) { // Put the array back into the list
            listField.options[i].value = replaceValueArray[i];
            listField.options[i].text = replaceTextArray[i];
         }
      } // Ends the check to make sure something was selected
   } // Ends the check for there being none in the list
}

Basically, you pass in a handle to the field and the one selected entry is removed from the list. If the field is empty or nothing is selected, the user is prompted. To remove the entry, arrays are built and everything that is not selected is placed into the array. Then the array is stored back in the list field.