Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    related select boxes & dynamically hide/show content after 2nd selection

    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/dynamici...bodescribe.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
    Last edited by nilsn; 01-24-2006 at 10:41 AM.

  • #2
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    no one?

    I was hoping that at least someone replyed on my issue.
    Wat is the reason why nobody didn't?

    - 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

    Nils

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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.

  • #4
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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.
    Code:
    <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.

  • #6
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Wow, Thanks Glenn 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

  • #7
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    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

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    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;
     }
    }

  • #9
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    ...
    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

    Code:
    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

  • #10
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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

  • #11
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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?
    Code:
    <option value="stateCode">state description</option>
    If so, then you don't need the state description in the array.

  • #13
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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.
    Code:
    <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>

  • #15
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •