|
|
|
|
|
|
| |
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> | |
|
|
| Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Clock at Status Bar
Categories : Java Script, HTML, Date Time | | | Check if Javascript is Enabled or Disabled - Works in all Browsers
Categories : Java Script, HTML, Web Browsers | | | Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security | | | 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 | | | hick
Categories : HTML, Java Script | | | Builds JavaScript that updates the contents of one selector based on another.
Categories : HTML, Java Script, PHP, Complete Programs, General | | | Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML | | | Javascript Color Picker
Categories : Java Script, Colors, HTML | | | Mordern Peroidic Table - Science
Categories : Java Script, HTML, Charts and Graphs | | | Unobtrusive javascript for maintaining scrollable layer state
Categories : DHTML, Java Script, HTML | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Bookmarklets are simple tools that extend the surf and
search capabilities of Netscape and Explorer web browsers.
Categories : Java Script, HTML, General | | | Java Script Based Navigation
Categories : HTML, Java Script, Navigation | | | Cool tool tip
Categories : Java Script, HTML, Web Design | |
|
|
