Manage Learn to apply best practices and optimize your operations.

Fill dependant select lists without reloading

In order to avoid reloading, or using activeXobject, you can store all choices and items in JavaScript array.

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"
"https://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);
 //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.

Dig Deeper on JavaScript for Lotus Notes Domino

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.

-ADS BY GOOGLE

SearchWindowsServer

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchDataCenter

SearchContentManagement

Close