Dynamic Select in HTML with Ajax

Dynamic lists or menus with the SELECT tag in forms, with JavaScript and Ajax

In HTML 4, drop-down lists are encoded with a select tag containing a list of options:

<select>
  <option value="" selected>Pomme</option>
  <option value="">Orange</option>
</select>

We will see that it is easy to dynamically change a such list with JavaScript code.

Better yet, if we allow the user to edit a list, it is necessary to save and load it at a later session, and we will see how to accomplish that with Ajax.

Attributes of SELECT

size: The maximal number of rows displayed. Ex: size="10".

multiple: Added if several item may be selected at once.

selectedIndex: Number of the selected item, from zero.

Dynamically change a SELECT

The select tag

It includes at least one option, and possibly a text and a value.

Example:

<option>Apple</option>

With a value and if the option is selected by default:

<option value="MacIntosh" selected >Apple</option>

For example, you can use the text to display the title of a page and add a value for the URL. The JavaScript code will retrieve the proper data.

JavaScript find the content of an option, with the text attribute of option, while the value attribute returns the value.

For the example, it is assumed that the form is named form1 and the select the name select1. You can access an option by its index number in the list:

The first option is at index 0:

document.write (document.form1.select1[0]. text); 
document.write (document.form1.select1[0]. value);

Changing an option

That said, it becomes easy to change a list. To change the value, we assign something to the value property:

document.form1.select1[0]. value = "new value";

To change the content, we create a new Option object whose argument is the wording to be contained in the option.

document.form1.select1[0] = new Option ( "new name");

Adding an option

Knowing that the number of options is given by the length attribute of the select object, you can add a new entry at the end of the list by creating an object Option:

var length = document.form1.select1.length; 
document.form1.select1[length] = new Option ( "New entry");

Deleting an option

To remove an option it is assigned to null:

document.form1.select1[x] = null;

But this must be the last in the list, and if this is not the case, we pack the list.

For example if you have a list of three options:

<select> 
     <option> Apple </option> 
     <option> Orange </option> 
     <option> Cherry </option>
</ select>

And we want to delete the second option the list is so packed:

for(i = 1; i < length; i++)
{
    document.form1.select1[i] = new Option(document.form1.select1[ i + 1].text);
}
document.form1.select1[length] = null;

For compatibility with IE, we should also detect and assign holes in list, see at the demo.

Inserting an option

It is the same process in reverse order, if the position of insertion is n:

for(i = length; i > n; i--)
{
  document.form1.select1[i] = document.form1.select1[i - 1];
}
document.form1.select1[n] = new Option("new name");

Load and save options of SELECT

Two Ajax functions were added to our Dynamic Select library.

dataReader reads a file on the server. Its arguments are the filename and the name of a function called when the request is terminated.

dataWrite calls a PHP script on the server. The arguments are the data variable which contains the parameters of the script, the name of a function called when the request is made and the name of the form.

When the contents of the list is saved, the submit button of the form is activated delayed, but this is an option for the demo, and is independent of the purpose of this article.

Loading a list of options

The method onload of window executes the Ajax script that loads the list with the dataRead function, then calls the function that populates the select options.

function populate(content)
{
  content = content.replace(" ", "");
  var lst = content.split("<br>");
  var optlist = document.forms[0].select1;
  for(i = 0; i < lst.length; i++)
  {
    if(lst[i] == "") continue;
    optlist.options[i] = new Option(lst[i]);
  }
}

In the file, names are separated by the <br> marker, it is a choice among others.

Saving the list

The event onclick is associated to the saveList JavaScript function that builds a string of parameters with the options of the select and sends them to a PHP script that creates a text file for use at a later session.

var formname =  document.forms[0];
var optlist = formname.select1;
var size = optlist.options.length;
for(i = 0; i < size; i++)
{
     title = optlist.options[i].text;
    if(data != "") data +="&";
    data += "tab" + String(i) + "=" + title;
}    	 
dataWrite("dynamic-save.php", data, loadapage, formname);

The script is obvious, it gets the parameters and creates a text file and separates the names with the string <br>.

The code of this Dynamic Select library is put into practice in the demonstration below.

Demonstration of a dynamic SELECT tag

This demo shows how to modify the list of options for a SELECT tag in an HTML form. The Save function is disabled in the online demo. It works in the version contained in the archive.

The JavaScript code is sufficient to change the list of options of a SELECT. Ajax allows the code to load a predefined list or to save the new modified list.



Option

Remove the selected option

Move up in the list the option
(Disabled in the online demo on Xul.fr)
© 2009-2012 Xul.fr