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.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    Question Drop Down Box changes other drop down box - How to change - How to change cases?

    Hello,

    Current Live View: https://tornhq.com/AroundTheWorld/Lo...WorkingOn.html

    This content is going to be implemented into a form I am currently working on once completed. As you can see, not all of the countries have yet been broken down as some we're having difficulties doing so.

    Code:
        SList.getSelect = function (slist, option) {
            document.getElementById('scontent').innerHTML = ''; // empty option-content
    
            if (SList[slist][option]) {
                // if option from the last Select, add text-content, else, set dropdown list
                if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
                else {
                    var addata = '<option>- - -</option>';
                    for (var i = 0; i < SList[slist][option].length; i++) {
                        addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
                    }
    
                    // cases for each dropdown list
                    switch (slist) {
                        case 'slist2':
                            document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">' + addata + '</select>';
                            document.getElementById('slist3').innerHTML = '';
                            break;
                        case 'slist3':
                            document.getElementById('slist3').innerHTML = txtsl3 + ' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
                            break;
                    }
                }
            } else {
                // empty the tags for select lists
                if (slist == 'slist2') {
                    document.getElementById('slist2').innerHTML = '';
                    document.getElementById('slist3').innerHTML = '';
                } else if (slist == 'slist3') {
                    document.getElementById('slist3').innerHTML = '';
                }
            }
        }
    I need to know how to edit the following, if there is a simple way to set the case for each one as they are not all split up into the same way, some are Districts, some states and whatnot so the new question varies.

    Or do I simply need to make another big list to do them all?

    Best Regards,
    Tim

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Well, for starters, this is generally a really bad way to add <select>s and <option>s. Period.

    I would certainly toss out your entire getSelect() function and rewrite it.

    But I'm also not clear on what your question is. Are you asking *HOW* to implement the third level? I don't see any countries with any third level data, at this point.

    If that's what you are asking, one possible way:
    Code:
        SList.slist2 = {
            ...
            "United Kingdom" : 
                 { "England" : ["Staffordshire", "Derby", ... ],
                    "Scotland" : ["Edinburgh", ... ],
                    "Wales" : [ ... ],
                    "Northern Ireland" : [ .... ]
                 },
           ...
        };
    I have to ask: Why would you name that Slist.slist2 instead of Slist.countries ?? Not that it really matters, but why not make code more self documenting?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Give me 3 or 4 countries with real 3 level data like that--as well as some with only 2 level data--and I'll rewrite the whole thing.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Oh, what the heck. I couldn't wait.

    Look at this code. And this code does it right. None of your ugly innerHTML manipulation.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Choose your location</title>
    </head>
    
    <body>
    <div>
    <form id="locations">
    Select Option:<br />
    <select name="country"></select>
    <select name="region" style="display: none;"></select>
    <select name="subregion" style="display: none;"></select>
    </form>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var countries = {
            "Country" : "",
            "Afghanistan": ["Province","Badakhshan","Baghlan","Kunduz","Takhar","Samangan",
                            'Faryab','Jowzjan'],
            "American Samoa": ["District",'Eastern','Western',"Manu'a"],
            "United Kingdom" : 
                 { "Nation" : "",
                   "England" : ["County","Cumbria","Hertfordshire","Norfolk","Northamptonshire",
                                "Oxfordshire","Suffolk","Surrey","Warwickshire","West Sussex" ],
                    "Scotland" : ["Shire","Edinburgh","Aberdeen","Fife","Perth" ],
                    "Wales" : ["Principal Area","Cardiff","Conwy","Powys" ],
                    "Northern Ireland" : ["County","Antrim","Down","Londonderry" ]
                 },
            "United_States": 
                 { "State" : "",
                   "California" : ["County","Los Angeles","Santa Ana","Napa","Sonoma","Yolo"],
                   "Louisiana" : ["Parish","Acadia","Allen","Bossier","Caldwell"],
                   "Washington" : ["County","King","Snohomish","Pierce","Skagit","Island"]
                 }
          };
    
          function fillSelect( sel, list )
          {
              for ( var n = sel.options.length-1; n >= 0; --n )
              {
                  sel.options[n] = null;
              }
              var prefix = "choose a ";
              if ( list instanceof Array )
              {
                  for ( var i = 0; i < list.length; ++i )
                  {
                      sel.options[sel.options.length] =
                          new Option( prefix + list[i], list[i] );
                      prefix = "";
                  }
              } else {
                  for ( var c in list )
                  {
                      sel.options[sel.options.length] =
                          new Option( prefix + c, c );
                      prefix = "";
                  }
              }
              sel.style.display = "inline";
          }
      
          var form = document.getElementById("locations");
          fillSelect( form.country, countries );
    
          form.country.onchange = function( )
          {
              form.region.style.display = "none";
              form.subregion.style.display = "none";
              var selix = this.selectedIndex;
              if ( selix > 0 )
              {
                  var Country = this.value;
                  var regions = countries[Country];
                  fillSelect( form.region, regions );
              }
          }
          form.region.onchange = function( )
          {
              form.subregion.style.display = "none";
              var selix = this.selectedIndex;
              if ( selix > 0 )
              {
                  var rList = countries[form.country.value];
                  if ( rList instanceof Array ) { return; /* no subregions this country */ }
                  var subregions  = rList[this.value];
                  fillSelect( form.subregion, subregions );
              }
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    MrTIMarshall (03-21-2013)

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Code:
        SList.getSelect = function (slist, option) {
            document.getElementById('scontent').innerHTML = ''; // empty option-content
    
            if (SList[slist][option]) {
                // if option from the last Select, add text-content, else, set dropdown list
                if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
                else {
                    var addata = '<option>- - -</option>';
                    for (var i = 0; i < SList[slist][option].length; i++) {
                        addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
                    }
    
                    // cases for each dropdown list
                    switch (slist) {
                        case 'slist2':
                            document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">' + addata + '</select>';
                            document.getElementById('slist3').innerHTML = '';
                            break;
                        case 'slist3':
                            document.getElementById('slist3').innerHTML = txtsl3 + ' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
                            break;
                    }
                }
            } else {
                // empty the tags for select lists
                if (slist == 'slist2') {
                    document.getElementById('slist2').innerHTML = '';
                    document.getElementById('slist3').innerHTML = '';
                } else if (slist == 'slist3') {
                    document.getElementById('slist3').innerHTML = '';
                }
            }
        }
    I have just highlighted the section I was regarding. It is the part which writes the new 'Select Option:' field, of which I would like to ask, for example 'Now select the district' or 'Now select the state' or whatnot.

    Do i need to edit all my ' for " alike this?

    Orignal
    Code:
    "Tuvalu": ['Split_1', 'Split_2', 'Split_3'],
    Modified
    Code:
    "Tuvalu": ["Split_1", 'Split_2", "Split_3"],
    Thank you for your help and sorry I did no reply, I checked my thread before going to bed.

    Best Regards,
    Tim

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Thank you for the code you have provided, this is my first real Javascript thing I am making and you've given me more of an inside on how to do an array!

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by MrTIMarshall View Post
    Do i need to edit all my ' for " alike this?

    Original
    Code:
    "Tuvalu": ['Split_1', 'Split_2', 'Split_3'],
    Modified
    Code:
    "Tuvalu": ["Split_1", 'Split_2" , "Split_3"],
    In this instance there is no difference between single quotes ' and double quotes ", but of course they must match.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    MrTIMarshall (03-21-2013)

  • #8
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    In this instance there is no difference between single quotes ' and double quotes ", but of course they must match.
    Thank you for your input Philip M

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Quote Originally Posted by MrTIMarshall View Post
    Thank you for the code you have provided, this is my first real Javascript thing I am making and you've given me more of an inside on how to do an array!
    Note carefully that we are MIXING arrays with objects.

    Where you see { "name" : value_of_any_kind } we have an object.
    Where you see [ "name", "name", ... ] we have an array.

    Look especially at the code in the fillSelect function, where I have to use two completely different iteration techniques to access the members of each. Not hard, just have to do it right.

    *********

    I chose to have the first <option> in each <select> describe what the <select> is for. That's why the first element in both the arrays and objects describes the type of political entity of that particular list ("County", "State", "Shire", etc.). But we could, instead, apply a <label> to each <select> that describes the same thing. Just a little simpler the way I have it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    MrTIMarshall (03-21-2013)

  • #10
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    See to this page about Changing select element content on the fly to use the options constructor new Option(text, value, defaultSelected, selected).

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    The only part of that page that my code doesn't follow is this:
    1) Remove all options by setting the Options array's length to 0
    document.myform.master.options.length=0
    Doing the above instantly empties the select element, ready to be populated with new data.
    My method of setting all the <option>s to null, in reverse order, is left over from my days working with Netscape where just setting the length to zero didn't work.

    I guess I could abandon that since I don't think Netscape is exactly a big player in the market any more. <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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