...

View Full Version : related select boxes & dynamically hide/show content after 2nd selection



nilsn
01-24-2006, 11:39 AM
Hi,

Can anyone help me out with the next described problem?

I'm using this script about related selectboxes I found on http://www.webtricks.com/sourcecode/code.cfm?CodeID=18
wich works well for me.

But I also want the related value of another column (in this example "note")
dynamically placed right under the selectboxes.

I found this second script on http://www.dynamicdrive.com/dynamicindex1/combodescribe.htm

and tried to combine those functions.

I thought it worked well, but when I took a better look I saw that the value was not belonging to the option I choosed.
I'm using coldfusion to require the data.

Here is my code:

<!--- Select the states and area codes. --->
<cfquery datasource="#DS#" name="GetStates">
SELECT S.State, S.StateCode, AC.AreaCode
FROM States S, AreaCodes AC
WHERE S.StateCode=AC.StateCode
ORDER BY S.State, AC.AreaCode
</cfquery>

<!--- Select all the area codes. --->
<cfquery datasource="#DS#" name="GetCodes">
SELECT AreaCode, note
FROM AreaCodes
ORDER BY AreaCode
</cfquery>

<script language = "JavaScript">
<!--
// For each state, create an array to hold the area codes.
// Each state array will be identified by the two-character state abbreviation
<cfoutput query="GetStates" group="State">
// Create the array
StateArray#StateCode# = new Array();
<cfset i = 0>
// Populate the array
<cfoutput>
<cfset i = i + 1>
StateArray#StateCode#[#i#] = #AreaCode#;
</cfoutput>
</cfoutput>

// Function to populate the area codes for the state selected
function PopulateAreaCode() {
// Only process the function if the first item is not selected.
if (document.StateForm.StateCode.selectedIndex != 0) {
// Find the state abbreviation
var ThisState = document.StateForm.StateCode[document.StateForm.StateCode.selectedIndex].value;
// Set the length of the arecode drop down equal to the length of the state's array
document.StateForm.AreaCode.length = eval("StateArray" + ThisState + ".length");
// Put 'Select' as the first option in the area code drop-down
document.StateForm.AreaCode[0].value = "";
document.StateForm.AreaCode[0].text = "Select";
document.StateForm.AreaCode[0].selected = true;
// Loop through the state's array and populate the area code drop down.
for (i=1; i<eval("StateArray" + ThisState + ".length"); i++) {
document.StateForm.AreaCode[i].value = eval("StateArray" + ThisState + "[i]");
document.StateForm.AreaCode[i].text = eval("StateArray" + ThisState + "[i]");
}
}
}
//-->
</script>



<form name="StateForm">
<p>
<table border="0">
<tr>
<td>
<select name="StateCode" onChange="PopulateAreaCode();displaydesc(document.StateForm.AreaCode, thetext1, 'textcontainer1')">
<option value="0">Select State</option>
<cfoutput query="GetStates" group="State">
<option value="#StateCode#">#State#</option>
</cfoutput>
</select>
</td>
<td>
<select name="AreaCode" width="70" style="width:150" size="1" onChange="displaydesc(document.StateForm.AreaCode, thetext1, 'textcontainer1')">
<option value="0">Select Area Code</option>
<cfoutput query="GetCodes">
<option value="#AreaCode#">#AreaCode#</option>
</cfoutput>
</select>
</td>
</tr>
</table>
</p>
<br><hr><br>
<span id="textcontainer1"></span>
</form>

<script type="text/javascript">
//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
var thetext1=new Array()
<cfset tlr = 0>
thetext1[0]="niks"

<cfoutput query="GetCodes">
<cfset tlr = tlr + 1>
thetext1[#tlr#]="#JSStringFormat(note)#"
</cfoutput>

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}

displaydesc(document.StateForm.AreaCode, thetext1, 'textcontainer1')

</script>


Does anybody see a challenge here?

Or has somebody have an alternative option?

Thanks in advanced

Nils

nilsn
01-30-2006, 07:26 AM
I was hoping that at least someone replyed on my issue. :(
Wat is the reason why nobody didn't? :confused:

- is it not reproducable?
- is is too hard?
- does it not belong in this thread?
- need you more information or a working example?

Can someone at least give it a try! :)

I would be vere grateful :thumbsup:

Nils

glenngv
01-30-2006, 07:35 AM
Not all knows ColdFusion (but even if we do, we can't run the page without having to set up the db and data) and you should post the generated code not the server-side code.

nilsn
01-30-2006, 12:24 PM
Hi Glenn,

Thanks for your quick response.
Sorry, didn't realise that.

I'v modified my example, so it will be reproducable now.
Hopefully you can help me out.

Here is my new example:




<script language = "JavaScript">
<!--
StateArrayO1 = new Array();
StateArrayO1[1] = 11;
StateArrayO1[2] = 12;

StateArrayO2 = new Array();
StateArrayO2[1] = 21;
StateArrayO2[2] = 22;
StateArrayO2[3] = 23;

StateArrayO3 = new Array();
StateArrayO3[1] = 31;
StateArrayO3[2] = 32;
StateArrayO3[3] = 33;
StateArrayO3[4] = 34;

StateArrayO4 = new Array();
StateArrayO4[1] = 41;
StateArrayO4[2] = 42;
StateArrayO4[3] = 43;
StateArrayO4[4] = 44;
StateArrayO4[5] = 45;


// Function to populate the area codes for the state selected
function PopulateAreaCode() {
// Only process the function if the first item is not selected.
if (document.StateForm.StateCode.selectedIndex != 0) {
// Find the state abbreviation
var ThisState = document.StateForm.StateCode[document.StateForm.StateCode.selectedIndex].value;
// Set the length of the arecode drop down equal to the length of the state's array
document.StateForm.AreaCode.length = eval("StateArray" + ThisState + ".length");
// Put 'Select' as the first option in the area code drop-down
document.StateForm.AreaCode[0].value = "";
document.StateForm.AreaCode[0].text = "Select";
document.StateForm.AreaCode[0].selected = true;
// Loop through the state's array and populate the area code drop down.
for (i=1; i<eval("StateArray" + ThisState + ".length"); i++) {
document.StateForm.AreaCode[i].value = eval("StateArray" + ThisState + "[i]");
document.StateForm.AreaCode[i].text = eval("StateArray" + ThisState + "[i]");
}
}
}
//-->
</script>



<form name="StateForm">
<select name="StateCode" onChange="PopulateAreaCode();displaydesc(document.StateForm.AreaCode, thetext1, 'textcontainer1')">
<option value="0">Select</option>
<option value="O1">Option 1</option>
<option value="O2">Option 2</option>
<option value="O3">Option 3</option>
<option value="O4">Option 4</option>
</select>
<select name="AreaCode" size="1" onChange="displaydesc(document.StateForm.AreaCode, thetext1, 'textcontainer1')">
<option value="0">Select</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
</select>
<hr>
<span id="textcontainer1"></span>
</form>

<script type="text/javascript">
//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
var thetext1=new Array()
thetext1[0]="no text"

thetext1[1]="selectbox 1, option 1 &gt;&gt; selectbox 2, option 1"
thetext1[2]="selectbox 1, option 1 &gt;&gt; selectbox 2, option 2"

thetext1[3]="selectbox 1, option 2 &gt;&gt; selectbox 2, option 1"
thetext1[4]="selectbox 1, option 2 &gt;&gt; selectbox 2, option 2"
thetext1[5]="selectbox 1, option 2 &gt;&gt; selectbox 2, option 3"

thetext1[6]="selectbox 1, option 3 &gt;&gt; selectbox 2, option 1"
thetext1[7]="selectbox 1, option 3 &gt;&gt; selectbox 2, option 2"
thetext1[8]="selectbox 1, option 3 &gt;&gt; selectbox 2, option 3"
thetext1[9]="selectbox 1, option 3 &gt;&gt; selectbox 2, option 4"

thetext1[10]="selectbox 1, option 4 &gt;&gt; selectbox 2, option 1"
thetext1[11]="selectbox 1, option 4 &gt;&gt; selectbox 2, option 2"
thetext1[12]="electbox 1, option 4 &gt;&gt; selectbox 2, option 3"
thetext1[13]="selectbox 1, option 4 &gt;&gt; selectbox 2, option 4"
thetext1[14]="selectbox 1, option 4 &gt;&gt; selectbox 2, option 5"

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}
displaydesc(document.StateForm.AreaCode, thetext1, 'textcontainer1')
</script>



You see what my problem is?
It shows always the text belonging to the first selectbox.

Thanks for helping,
Nils

glenngv
01-31-2006, 03:48 AM
You must have a "3D" array of the data including the associated description of each area code. You don't need a separate array for description.

<html>
<head>
<script language = "JavaScript">
<!--
//State data (including description) in "3D" Array format
var StateArray = new Array();
StateArray[0] = new Array(
[11, "Area Code 11"],
[12, "Area Code 12"]
);
StateArray[1] = new Array(
[21, "Area Code 21"],
[22, "Area Code 22"],
[23, "Area Code 23"]
);
StateArray[2] = new Array(
[31, "Area Code 31"],
[32, "Area Code 32"],
[33, "Area Code 33"],
[34, "Area Code 34"]
);
StateArray[3] = new Array(
[41, "Area Code 41"],
[42, "Area Code 42"],
[43, "Area Code 43"],
[44, "Area Code 44"],
[45, "Area Code 45"]
);


// Function to populate the area codes for the state selected
function PopulateAreaCode(oSelState) {
var i, j, len, len2;
var oSelArea = oSelState.form.AreaCode;
oSelArea.options.length = 1; //remove all options except 1st item
len = StateArray.length;

//populate all areas if first item is selected (same as default)
if (oSelState.selectedIndex == 0) {
for (i=0; i<len; i++){
len2 = StateArray[i].length;
for (j=0; j<len2; j++){
oSelArea.options[oSelArea.options.length] = new Option(StateArray[i][j][0], StateArray[i][j][0]);
}
}
}
else{ //populate the corresponding areas only
var idx = oSelState.selectedIndex - 1; //get the associated index of StateArray based from selected option
len = StateArray[idx].length;
for (i=0; i<len; i++){
oSelArea.options[i+1] = new Option(StateArray[idx][i][0], StateArray[idx][i][0]);
}
}
}


function displaydesc(oSelArea, oSelState, container){
if (document.getElementById){
var idxState = oSelState.selectedIndex;
var idxArea = oSelArea.selectedIndex;
document.getElementById(container).innerHTML = (idxState > 0 && idxArea > 0 ) ? oSelState.options[idxState].text + " &gt;&gt; " + StateArray[idxState-1] [idxArea-1][1] : "No text";
}
}
//-->
</script>
</head>
<body>
<form name="StateForm">
<select name="StateCode" onChange="PopulateAreaCode(this); displaydesc(this.form.AreaCode, this, 'textcontainer1')">
<option value="0">Select</option>
<option value="O1">Option 1</option>
<option value="O2">Option 2</option>
<option value="O3">Option 3</option>
<option value="O4">Option 4</option>
</select>
<select name="AreaCode" size="1" onChange="displaydesc(this, this.form.StateCode, 'textcontainer1')">
<option value="0">Select</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
</select>
<hr>
<span id="textcontainer1">No text</span>
</form>
</body>
</html>
I completely re-work the script to make it easily maintained.

BTW, you don't need eval in your original script. eval is inefficient. Use square bracket notation instead. See my sig for more info on it. But my script doesn't need that. You can use that technique in your future projects.

nilsn
01-31-2006, 08:25 AM
Wow, Thanks Glenn :thumbsup: great work!!!

I've tested it and it's exactly what I needed.

I only need to rebuild it to ColdFusion, but that's my part :)

Again, thanks for your time, knowledge & efforts.

Nils

nilsn
02-06-2006, 08:31 AM
Hi Glenn (or others),

Sorry to bother you again. But actually I need an addition to the script. It came up while I was implement it in my coldfusion enviroment, which works fine!
I've tried it myself first, but to be honest my javascript knowledge is not good enough.

Here I describe my addition to these example:

Every option in the first selectbox has also (default) related text to show. So after you choose from the first selectbox some text will show, and after choosing something from the second selectbox the text will automatically change to the text belonging to that option.

Get the picture?

I'v tried to adjust something to your script, see code:



<html>
<head>
<script language = "JavaScript">
<!--
//State data (including description) in "3D" Array format
var StateArray = new Array();
StateArray[0] = new Array(
["State Code 1",11, "Area Code 11"],
["State Code 1",12, "Area Code 12"]
);
StateArray[1] = new Array(
["State Code 1",21, "Area Code 21"],
["State Code 1",22, "Area Code 22"],
["State Code 1",23, "Area Code 23"]
);
StateArray[2] = new Array(
["State Code 1",31, "Area Code 31"],
["State Code 1",32, "Area Code 32"],
["State Code 1",33, "Area Code 33"],
["State Code 1",34, "Area Code 34"]
);
StateArray[3] = new Array(
["State Code 1",41, "Area Code 41"],
["State Code 1",42, "Area Code 42"],
["State Code 1",43, "Area Code 43"],
["State Code 1",44, "Area Code 44"],
["State Code 1",45, "Area Code 45"]
);


// Function to populate the area codes for the state selected
function PopulateAreaCode(oSelState) {
var i, j, len, len2;
var oSelArea = oSelState.form.AreaCode;
oSelArea.options.length = 1; //remove all options except 1st item
len = StateArray.length;

//populate all areas if first item is selected (same as default)
if (oSelState.selectedIndex == 0) {
for (i=0; i<len; i++){
len2 = StateArray[i].length;
for (j=0; j<len2; j++){
oSelArea.options[oSelArea.options.length] = new Option(StateArray[i][j][0], StateArray[i][j][0]);
}
}
}
else{ //populate the corresponding areas only
var idx = oSelState.selectedIndex - 1; //get the associated index of StateArray based from selected option
len = StateArray[idx].length;
for (i=0; i<len; i++){
oSelArea.options[i+1] = new Option(StateArray[idx][i][1], StateArray[idx][i][1]);
}
}
}


function displaydesc(oSelArea, oSelState, container){
if (document.getElementById){
var idxState = oSelState.selectedIndex;
var idxArea = oSelArea.selectedIndex;
document.getElementById(container).innerHTML = (idxState > 0 && idxArea > 0 ) ? oSelState.options[idxState].text + " &gt;&gt; " + StateArray[idxState-1] [idxArea-1][1] : "No text";
}
}
//-->
</script>
</head>
<body>
<form name="StateForm">
<select name="StateCode" onChange="PopulateAreaCode(this); displaydesc(this.form.AreaCode, this, 'textcontainer1')">
<option value="0">Select</option>
<option value="O1">Option 1</option>
<option value="O2">Option 2</option>
<option value="O3">Option 3</option>
<option value="O4">Option 4</option>
</select>
<select name="AreaCode" size="1" onChange="displaydesc(this, this.form.StateCode, 'textcontainer1')">
<option value="0">Select</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
</select>
<hr>
<span id="textcontainer1">No text</span>
</form>
</body>
</html>


But now I need to output the text and that part I get lost.

Hope to hear from you.
Thanks in advanced.

Nils

glenngv
02-06-2006, 11:34 AM
function displaydesc(oSelArea, oSelState, container){
if (document.getElementById){
var idxState = oSelState.selectedIndex;
var idxArea = oSelArea.selectedIndex;
var txt = (idxState > 0 ) ? oSelState.options[idxState].text : "";
txt += (idxArea > 0 ) ? " &gt;&gt; " + oSelArea.options[idxArea].text : "";
if (txt=="") txt = "No text";
document.getElementById(container).innerHTML = txt;
}
}

nilsn
02-06-2006, 02:22 PM
Hi Glenn,

Thanks again.

Actually this is almost what I meant, but not completely.

1.
As you can see in my previous message I added an extra item to the StateArray.


...
StateArray[0] = new Array(
["State Code 1",11, "Area Code 11"],
["State Code 1",12, "Area Code 12"]
);
...
etc.


And that string (first item) I want to output on the screen after selecting form the first selectbox

2.
In your new suggested solution the output of the first selectbox stays on the screen after selecting from the second selectbox.
I'd like to see that the text container is only the string from the third item in the array.


To be honest I don't think my suggestion in the first place wasn't correct.
(the one with the 3 items in the StateArray)

I think i must be something like



var StateArray = new Array("State Code 1",0);
StateArray[0] = new Array(
[11, "Area Code 11"],
[12, "Area Code 12"]
);


Problably this is not correct, but I don't know how to put it.

Please let me know if you understand what I mean?

Nils

nilsn
02-07-2006, 04:55 PM
This is only additional information:

I'm playing around with your solutions and try to get it work how I want it to work. As far as I can see I need another array in the existing array.

something like:


var StateArray = new Array();
StateArray[0] = new Array(["desc1"],
[11, "Area Code 11"],
[12, "Area Code 12"]
);
StateArray[1] = new Array(["desc2"],
[21, "Area Code 21"],
[22, "Area Code 22"],
[23, "Area Code 23"]
);





For a better understanding, I'll try to explain more my situation.
In the first selectbox the options are states, the values are statecodes and after selecting an option the textcontainer must output a description belonging to the state

The second selectbox will be filled with options related to the first selectbox. These values are actually areacodes and the options are the areas.
After selecting an option from the second selectbox the textcontainer must only output a description belonging to the area (no description of the state anymore)

This is not meant to confuse you, but it's hopefully a better explanation.

If I do something like I made above, there will come another option in the second selectbox and that's not the purpose.

I'm a little mixed up in the multiple arrays.

Thanks
Nils

nilsn
02-13-2006, 03:31 PM
Hi again,

After a week of trying and trying I can't find a way to edit your solution on post 5 & post 8 to get what I needed.
I've read more about Multi-Dimensional Arrays on http://jennifermadden.com/javascript/arraySimple2.html
And I figured that my arrays weren't configured right (I think)

So here is my new example:


<html>
<head>

<script language = "JavaScript">
<!--
var StateArray = new Array();

StateArray[0]= new Array("SC1","SN1","SD1",
new Array(
["11","AN11","AD11"],
["12","AN12","AD12"]
)
);

StateArray[1]= new Array("SC2","SN2","SD2",
new Array(
["21","AN21","AD21"],
["22","AN22","AD22"],
["23","AN23","AD23"]
)
);

StateArray[2]= new Array("SC3","SN3","SD3",
new Array(
["31","AN31","AD31"],
["32","AN32","AD32"],
["33","AN33","AD33"],
["34","AN34","AD34"]
)
);

StateArray[3]= new Array("SC4","SN4","SD4",
new Array(
["41","AN41","AD41"],
["42","AN42","AD42"],
["43","AN43","AD43"],
["44","AN44","AD44"],
["45","AN45","AD45"]
)
);

// Function to populate the area codes for the state selected
function PopulateAreaCode(oSelState) {
var i, j, len, len2;
var oSelArea = oSelState.form.AreaCode;
oSelArea.options.length = 1; //remove all options except 1st item
len = StateArray.length;

//populate all areas if first item is selected (same as default)
if (oSelState.selectedIndex == 0) {
for (i=0; i<len; i++){
len2 = StateArray[i].length;
for (j=0; j<len2; j++){
oSelArea.options[oSelArea.options.length] = new Option(StateArray[i][j][0][3], StateArray[i][j][0][3]);
}
}
}
else{ //populate the corresponding areas only
var idx = oSelState.selectedIndex - 1; //get the associated index of StateArray based from selected option
len = StateArray[idx].length;
for (i=0; i<len; i++){
oSelArea.options[i+1] = new Option(StateArray[idx][i][1], StateArray[idx][i][1]);
}
}
}

function displaydesc(oSelArea, oSelState, container){
if (document.getElementById){
var idxState = oSelState.selectedIndex;
var idxArea = oSelArea.selectedIndex;
var txt = (idxState > 0 ) ?
oSelState.options[idxState].text : "";
txt += (idxArea > 0 ) ?
oSelArea.options[idxArea].text + " <br><br> " + StateArray[idxState-1] [idxArea-1][1] : "";

if (txt=="") txt = "No text";
document.getElementById(container).innerHTML = txt;
}
}


</script>
</head>
<body>

<form name="StateForm">
<select name="StateCode" onChange="PopulateAreaCode(this); displaydesc(this.form.AreaCode, this, 'textcontainer1')">
<option value="0">Select</option>
<option value="SC1">SN1</option>
<option value="SC2">SN2</option>
<option value="SC3">SN3</option>
<option value="SC4">SN4</option>
</select>
<br><br>
<select name="AreaCode" size="1" onChange="displaydesc(this, this.form.StateCode, 'textcontainer1')">
<option value="0">Select</option>
<option value="11">AN11</option>
<option value="12">AN12</option>
<option value="21">AN21</option>
<option value="22">AN22</option>
<option value="23">AN23</option>
<option value="31">AN31</option>
<option value="32">AN32</option>
<option value="33">AN33</option>
<option value="34">AN34</option>
<option value="41">AN41</option>
<option value="42">AN42</option>
<option value="43">AN43</option>
<option value="44">AN44</option>
<option value="45">AN45</option>
</select>
<hr>
<span id="textcontainer1"></span>
</form>
</body>
</html>



Again, as far is I can see, the arrays are rewritten and I think they have now all the information to require whenever they are needed.

But I still can't figured out how to adjust the rest of the script.
&#205;t's not building the options in the 2nd selectbox right.

I know I'm actually asking too much, but maybe someone can still give it a try?

Thanks,
Nils

glenngv
02-20-2006, 06:29 AM
Sorry for not getting back at your problem at once. I was busy at work the past 2 weeks.

I have a clarification first before giving you the solution.

Isn't it that the option text for states is already the description of that state?

<option value="stateCode">state description</option>

If so, then you don't need the state description in the array.

nilsn
02-20-2006, 11:40 AM
Hi Glenn,

No worries, I'm glad you still want to help me out.

Coming back on your question, the answer is no.

It's meant like a "title".

What I'v tried to build in "reply 11" is the new scenario.

Every STATE has an ID, a TITLE and a DESCRIPTION.
And every AREA has also an ID, a TITLE and a description, but also a reference to STATE (ID)

In the first selectbox, the option must be the TITLE of the STATE and the value must be the ID of the STATE.

After choosing an option 2 things must happen:

1. the textcontainer under the selectboxes must be filled and visible with the DESCRIPTION of the STATE
2. the second selectbox must be filled with the options related to the first selectbox

In the second selectbox, the option must be the TITLE of the AREA and the value must be the ID of the AREA (and of course, like said before... related!).

And after choosing an option from the second selectbox 1 thing must happen:

Clear the textcontainer and refill it with the DESCRIPTION of the AREA



Is this extra information more helpful to view my point?

That's why I rebuilt the arrays again. I'm not sure it's right, but I thought building it this way, it would be the easiest.

Thanks for helping, man.

Groeten (that dutch for greeting :))

Nils

glenngv
02-24-2006, 11:53 AM
I changed the data structure.
I used an array of State objects. The properties of each State such as id, desc and title are attached to each State object. In each State object, there is an array of Area objects attach to it. The properties of each Area such as id, desc and title are attached to each Area object.

<html>
<head>
<script language = "JavaScript">
<!--
var StateArray = new Array();

StateArray[0] = new Object();
StateArray[0].id = "State 1 ID";
StateArray[0].desc = "This is state 1 desc";
StateArray[0].title = "This is state 1 title";
StateArray[0].area = new Array();
StateArray[0].area[0] = new Object();
StateArray[0].area[0].id = "State 1 Area 1 ID";
StateArray[0].area[0].desc = "This is area desc 1 of state 1";
StateArray[0].area[0].title = "This is area title 1 of state 1";
StateArray[0].area[1] = new Object();
StateArray[0].area[1].id = "State 1 Area 2 ID";
StateArray[0].area[1].desc = "This is area desc 2 of state 1";
StateArray[0].area[1].title = "This is area title 2 of state 1";
StateArray[0].area[2] = new Object();
StateArray[0].area[2].id = "State 1 Area 3 ID";
StateArray[0].area[2].desc = "This is area desc 3 of state 1";
StateArray[0].area[2].title = "This is area title 3 of state 1";

StateArray[1] = new Object();
StateArray[1].desc = "This is state 2 desc";
StateArray[1].title = "This is state 2 title";
StateArray[1].area = new Array();
StateArray[1].area[0] = new Object();
StateArray[1].area[0].id = "State 2 Area 1 ID";
StateArray[1].area[0].desc = "This is area 1 desc of state 2";
StateArray[1].area[0].title = "This is area 1 title of state 2";
StateArray[1].area[1] = new Object();
StateArray[1].area[1].id = "State 2 Area 2 ID";
StateArray[1].area[1].desc = "This is area 2 desc of state 2";
StateArray[1].area[1].title = "This is area 2 title of state 2";
StateArray[1].area[2] = new Object();
StateArray[1].area[2].id = "State 2 Area 3 ID";
StateArray[1].area[2].desc = "This is area 3 desc of state 2";
StateArray[1].area[2].title = "This is area 3 title of state 2";
//...and so on


// Function to populate the area codes for the state selected
function PopulateAreaCode(oSelState) {
var i, j, len, len2;
var oSelArea = oSelState.form.AreaCode;
oSelArea.options.length = 1; //remove all options except 1st item
len = StateArray.length;

//populate all areas if first item is selected (same as default)
if (oSelState.selectedIndex == 0) {
for (i=0; i<len; i++){
len2 = StateArray[i].area.length;
for (j=0; j<len2; j++){
oSelArea.options[oSelArea.options.length] = new Option(StateArray[i].area[j].title, StateArray[i].area[j].id);
}
}
}
else{ //populate the corresponding areas only
var idx = oSelState.selectedIndex - 1; //get the associated index of StateArray based from selected option
len = StateArray[idx].area.length;
for (i=0; i<len; i++){
oSelArea.options[i+1] = new Option(StateArray[idx].area[i].title, StateArray[idx].area[i].id);
}
}
}


function displaydesc(oSelArea, oSelState, container){
if (document.getElementById){
var idxState = oSelState.selectedIndex - 1;
var idxArea = oSelArea.selectedIndex - 1 ;
var txt = "";
if (idxState > -1 && idxArea == -1){
txt = StateArray[idxState].desc;
}
if (idxState > -1 && idxArea > -1 ) {
txt = StateArray[idxState].area[idxArea].desc;
}
else if (idxState == -1 && idxArea > -1 ) { //area is selected from all available areas of all states
txt = findAreaDesc(oSelArea.options[oSelArea.selectedIndex].value);
}
if (txt=="") txt = "No text";
document.getElementById(container).innerHTML = txt;
}
}

function findAreaDesc(areaId){
var i, j, len2, len = StateArray.length;
for (i=0; i<len; i++){
len2 = StateArray[i].area.length;
for (j=0; j<len2; j++){
if (StateArray[i].area[j].id == areaId){
return StateArray[i].area[j].desc;
}
}
}
return ""; //area not found
}
//-->
</script>
</head>
<body>
<form name="StateForm" onsubmit="this.reset()">
<select name="StateCode" onChange="PopulateAreaCode(this); displaydesc(this.form.AreaCode, this, 'textcontainer1')">
<option value="0">Select</option>
<option value="State 1 ID">This is state 1 title</option>
<option value="State 2 ID">This is state 2 title</option>
</select>
<select name="AreaCode" size="1" onChange="displaydesc(this, this.form.StateCode, 'textcontainer1')">
<option value="0">Select</option>
<option value="State 1 Area 1 ID">This is area title 1 of state 1</option>
<option value="State 1 Area 2 ID">This is area title 2 of state 1</option>
<option value="State 1 Area 3 ID">This is area title 3 of state 1</option>
<option value="State 2 Area 1 ID">This is area title 1 of state 2</option>
<option value="State 2 Area 2 ID">This is area title 2 of state 2</option>
<option value="State 2 Area 3 ID">This is area title 3 of state 2</option>

</select>
<hr>
<span id="textcontainer1">No text</span>
</form>
</body>
</html>

nilsn
02-24-2006, 03:57 PM
Hi Glenn,

Thanks again for your great support.
Tested it.. works fine!
Customized it to cold fusion, still works fine!

It's exactly what I needed!


Greetings from Holland
Nils

glenngv
03-01-2006, 03:45 AM
Glad to be of help. :)
You're great too, you were able to easily customize it to coldfusion. It means you fully understand the data structure. ;)

nilsn
03-01-2006, 10:54 AM
I might understand it (a bit), but at this point I'm not quite able to build something like that. But I'm learning!
'Till so far I look at different codes, borowing peaces and ask for help on a forum like this. It's great to experience that people are willing to help each other.

The code is actually 'live' and you can view it on
http://www.3dpartij.nl/index.cfm?pageid=44
Although it doesn't has any real date, yet, you seen it works great!

Thanks again, Glenn!

Nils



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum