Share this page 

Initialize a SELECT "on the fly"Tag(s): Form

This example initialize a SELECT based on the selection of another one.


<body onload="settopic();">

var javat = new Array(
   "Language", "String and Number",  "Environment","IO",
   "Applet",  "Swing", "AWT","Javascript interaction",
   "JDBC", "Thread", "Networking",  "Servlet/JSP",
   "XML",  "Internationalization",  "Security", "JNI",
   "Date and Time", "Open Source", "Varia", "DEPRECATED"

var javal = new Array(
   "topics/java-language.html", "topics/java-stringnumber.html",
   "topics/java-env.html","topics/java-io.html", "topics/java-applet.html",
   "topics/java-swing.html", "topics/java-awt.html","topics/java-js.html",
   "topics/java-jdbc.html", "topics/java-thread.html", "topics/java-net.html",
   "topics/java-jsp.html",  "topics/java-xml.html",  "topics/java-inter.html",
   "topics/java-security.html", "topics/java-jni.html", "topics/java-date.html",
   "topics/java-os.html", "topics/java-varia.html", "topics/java-deprecated.html"

var javast = new Array(
   "Language", "Form", "Varia"

var javasl = new Array(
   "topics/js-language.html", "topics/js-form.html", "topics/js-varia.html"

var pbt = new Array(
   "Powerscript", "WinAPI,Registry,COM", "Datawindow", "Database",
   "PFC", "Common problems", "Jaguar/EAServer"

var pbl = new Array(
   "topics/pb-powerscript.html", "topics/pb-winapiregistry.html", "topics/pb-datawindow.html",
   "topics/pb-database.html", "topics/pb-pfc.html", "topics/pb-common.html", "topics/pb-jaguar.html"

function settopic() {
     var selectHowTo = document.theForm.howto;
     var selectTopic = document.theForm.topic;
     var theHowTo = selectHowTo.options[selectHowTo.selectedIndex].value;
     if (theHowTo == "java"){
        fillTheSelect(selectTopic, javat, javal);

     if (theHowTo == "js"){
        fillTheSelect(selectTopic, javast, javasl);

     if (theHowTo == "pb"){
        fillTheSelect(selectTopic, pbt, pbl);


function fillTheSelect(theSelect,values,links) {
     theSelect.options.length = 0;
     for(var i=0; i < values.length; i++) {
           theSelect.options[theSelect.options.length] = new Option(values[i], links[i]);
           theSelect.options[0].selected = true;

function go() {
     var selectTopic = document.theForm.topic;
     var thePage = selectTopic.options[selectTopic.selectedIndex].value;, "_top");


<table border="0">
Select HowTo type :
<td><SELECT NAME="howto" onChange="settopic();">
   <OPTION VALUE="js">Javascript HowTo
   <OPTION VALUE="pb">Powerbuilder HowTo
<tr><td>Select the Topic :
<td><SELECT NAME="topic">
<input type="button" onclick="go()" value="Go"/>

Try it :

Select HowTo type :
Select the Topic :