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.