Search results for 'Drop down'. 1 post(s) found.
- 2007/08/26 Linking Drop Downs
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>
<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>
Another posts included in "HTML, Javascript"
| Shake Your Window.... (0) | 2007/08/26 |
| Example Of Creating Objects (0) | 2007/08/26 |
| Printing A Page (0) | 2007/08/26 |
| Roman Numerals From Integers (0) | 2007/08/26 |
| Get A Print Dialog Box By Clicking A Button (0) | 2007/08/26 |
| Keyboard event detection (Key Tracker) (0) | 2007/08/26 |
| IsIn For Arrays (0) | 2007/08/26 |
Trackback : Cannot send a trackbact to this post.
-
Subject different money making ideas
2010/01/29 03:17
moneyideas
-
Subject different money making ideas
2010/01/29 12:05
moneyideas
-
Subject different money making ideas
2010/01/31 16:43
moneyideas
Prev
Rss Feed