Share this page 

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


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

<HTML>

<body onload="settopic();">

<SCRIPT>
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;
     window.open(thePage, "_top");
}


</SCRIPT>

<FORM NAME="theForm" METHOD="POST">
<table border="0">
<tr><td>
Select HowTo type :
<td><SELECT NAME="howto" onChange="settopic();">
   <OPTION VALUE="java" SELECTED>Java HowTo
   <OPTION VALUE="js">Javascript HowTo
   <OPTION VALUE="pb">Powerbuilder HowTo
 </SELECT>
<tr><td>Select the Topic :
<td><SELECT NAME="topic">
   <OPTION>--------------------
   <OPTION>
   <OPTION>
   <OPTION>
   <OPTION>
 </SELECT>
<input type="button" onclick="go()" value="Go"/>
</table>
</FORM>
</BODY>
</HTML>

Try it :

Select HowTo type :
Select the Topic :