|
|
|
|
|
|
| |
Linking drop downs is a frequent question. Here is a javascript based example.
| <html>
<head>
<script language='javascript'>
/*
This assumes that you can work out how to fill the first box with php.
Then you create a series of js arrays, one index for each value of the parent box filled with
all the possible values for the child box. The below example assumes that the option value and
text are the same. You can use additional separators to split those elements if the value and text
are different (1,Here;2,There;3,Somewhere Else)
*/
var box2 = new Array();
box2['x'] = ",1,2,3";
box2['y'] = ",4,5,6";
box2['z'] = ",7,8,9";
var box3 = new Array();
box3['1'] = ",q,r,s";
box3['2'] = ",t,u,v";
function loadOptions(sParentBox, sChildBox)
{
//get the value of the selected option
var sParentValue = document.getElementById(sParentBox).value;
alert(sParentValue);
//load the appropriate event list to the option box
var theSel = document.getElementById(sChildBox);
//clear previous options
theSel.options.length = null;
//handle if there is no value
if (sParentValue == ''){alert("exiting"); return;}
if (sParentBox == "box1") {
oTargetArray = box2;
}else if(sParentBox == "box2"){
oTargetArray = box3;
}
//split the array values by the separator
var arrList = oTargetArray[sParentValue].split(",");
//loop thru the array of options to add them to the dropdown
for (x=0; x < arrList.length; x++)
{
var newOpt = new Option(arrList[x], arrList[x]);//(theText,theValue);
var selLength = theSel.length;
theSel.options[selLength] = newOpt;
}//next
}//end func
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Box 1</td>
<td>
<select name="box1" id="box1" onchange="loadOptions(this.name,'box2');">
<option value=''></option>
<option value='x'>x</option>
<option value='y'>y</option>
<option value='z'>z</option>
</select>
</td>
</tr>
<tr>
<td>Box 2</td>
<td>
<select name="box2" id="box2" onchange="loadOptions(this.name,'box3');">
</select>
</td>
</tr>
<tr>
<td>Box 1</td>
<td>
<select name="box3" id="box3">
</select>
</td>
</tr>
</form>
</body>
</html> | |
|
|
| Java Script Based Navigation
Categories : HTML, Java Script, Navigation | | | Builds JavaScript that updates the contents of one selector based on another.
Categories : HTML, Java Script, PHP, Complete Programs, General | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security | | | Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | complete simply working javascript password generator file. Use letter, vowels, consonants (uppercase and lowercase) arrays to create a really random and secure password.
improved security using time functions to initialize random number generator.
Categories : Java Script, HTML, Security, Authentication, Strings | | | Bookmarklets are simple tools that extend the surf and
search capabilities of Netscape and Explorer web browsers.
Categories : Java Script, HTML, General | | | How to get the Focus (Cursor) into a Form-Element.
Categories : HTML, Java Script | | | Cool tool tip
Categories : Java Script, HTML, Web Design | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Bouncing Marquee at Status Bar
Categories : Java Script, HTML, Browsers | | | Javascript Color Picker
Categories : Java Script, Colors, HTML | |
|
|
|
