JavaScript Auto Fill Drop-Down Menu

 

This script will automatically populate the form sub-select options when a user clicks on the main select title.

 

 

Example


 

Script Source

 

<Add the following to the HEAD section of your page >

<script type="text/javascript" src="dropDown.js"></script>

 

<The Form >

<form name="myForm" action="">
<select name="selectionOpt" onchange="selectArr(this.form.selection, ((this.selectedIndex == -1) ? null : option[this.selectedIndex-1]));">
<option value="-1">Select Option
<option value="1">Selection one
<option value="2">Selection two
<option value="3">Selection three
<option value="4">Selection four
</select>
<br>
<select name="selection" size="5">
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
</select>
</form>

 

<dropDown.js >

/*
// + Script by www.wizzardweb.co.uk
// + Copyright 2007
// + Pleas DO NOT remove this information
*/
option = new Array(
new Array(
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one"),
new Array("Sub Selection one")
),
new Array(
new Array("Sub Selection two"),
new Array("Sub Selection two"),
new Array("Sub Selection two"),
new Array("Sub Selection two"),
new Array("Sub Selection two"),
new Array("Sub Selection two")
),
new Array(
new Array("Sub Selection three"),
new Array("Sub Selection three"),
new Array("Sub Selection three"),
new Array("Sub Selection three"),
new Array("Sub Selection three")
),
new Array(
new Array("Sub Selection four "),
new Array("Sub Selection four"),
new Array("Sub Selection four"),
new Array("Sub Selection four"),
new Array("Sub Selection four"),
new Array("Sub Selection four")
)
);
function selectArr(sel, menuArr, okPmt, noPmt, dIt) {
var i, j;
var prompt;
for (i = sel.options.length; i >= 0; i--) {
sel.options[i] = null;
}
prompt = (menuArr != null) ? okPmt : noPmt;
if (prompt == null) {
j = 0;
}
else {
sel.options[0] = new Option(prompt);
j = 1;
}
if (menuArr != null) {
for (i = 0; i < menuArr.length; i++) {
sel.options[j] = new Option(menuArr[i][0]);
if (menuArr[i][1] != null) {
sel.options[j].value = menuArr[i][1];
}
j++;
}
sel.options[0].selected = true;
}
}

 

Please let me know if this script was helpful to you.

[rating]