Sometimes, you have to show multiple select lists. The choice you make in the first select list changes the items of another select list. Doing that often means reloading the page to let @formulas fill in the second select list with their new items.
In order to avoid reloading, or using activeXobject, you can store all choices and items in JavaScript array. The JavaScript will refill the select lists depending on the choices made by the user.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
//list of possibles items of the second
select list.
//the number of listeX[] must be linked
to the value of choices in
first select item.
//the content is made like that :
"NAME OF ITEM |VALUEofITEM"
liste1=new Array();
liste1[0]=" Bleu|A";
liste1[1]=" Vert|B";
liste1[2]=" Orange|C";
liste1[3]=" Rouge|D";
liste2=new Array();
liste2[0]=" Blue|A1";
liste2[1]=" Green|B2";
liste2[2]=" Orange|B3";
liste2[3]=" Red|B4";
liste2[4]=" Violet|B5";
liste3=new Array();
liste3[0]=" Blau|A11";
liste3[1]=" Grun|B22";
function changeSL(numeroListe){
objListe=document.forms[0].secondSL;
longueur=objListe.length;
//deleting old items
objListe.length=0;
//putting new items
dataArray=eval("liste"+numeroListe);
Requires Free Membership to View
Register today to access targeted resources from our editorial writers and independent industry experts focused on Lotus Domino, Notes, Workplace and other related technologies.
//get the array linked to the choice of
the first Select List (SL)
objListe.length=dataArray.length;
for(i=0;i<dataArray.length;i++){
valeurs=dataArray[i].split("|"); //separate
name and value of the
item
objListe.options[i].text=valeurs[0];
//new item
objListe.options[i].value=valeurs[1];
//new item value
}
}
</script>
<title>Document sans nom</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<form name="form1" method="post"
action="">
<p>first select list :
<select name=firstSL onchange="
changeSL
(this[this.selectedIndex].value)">
<option selected value="0">
Select an item to change the content of
the second select list</option>
<option value="1">French</option>
<option value="2">English</option>
<option value="3">German</option>
</select>
</p>
<p>second select list :
<select name=secondSL>
<option value="0" selected>
item 2.1</option>
<option value="1">item 2.2</option>
<option value="2">item 2.3</option>
<option value="3">item 2.4</option>
<option value="4">item 2.5</option>
<option value="5">item 2.6</option>
</select>
</p>
</form>
</body>
</html>
Do you have comments on this tip? Let us know.
This tip was submitted to the SearchDomino.com tip exchange by member Olivier Charles. Please let others know how useful it is via the rating scale below. Do you have a useful Notes/Domino tip or code to share? Submit it to our monthly tip contest and you could win a prize and a spot in our Hall of Fame.
This was first published in November 2004