SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    0 Post(s)
    0 Thread(s)

    Adding new options in double drop down list

    EDIT: Got it to work after some fiddling. Sorry to bother.

    Hello, this will be my first post. VERY new to JavaScript and require a bit of assistance with the code below.

    Once I add an option value 3, the second drop down will not generate for option 3 after entering options in SList.slist2 and SList.scontent if options are entered for option 3, the second drop down list stops generating all together for option 1 and 2 as well. I would appreciate any feedback. Thank you!
    $title="Contact Us";
    $description = "Contact Us";
    include "header.php" ?>
    <!-- The first select list -->
    Select Country: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
     <option>- - -</option>
     <option value="1">United States</option>
     <option value="2">Canada</option>
     <option value="3">Europe</option>
    <!-- Tags for the seccond dropdown list, and for text-content -->
    <span id="slist2"></span> <div id="scontent"></div>
    /* Script Double Select Dropdown List, from: */
    var SList = new Object();             // JS object that stores data for options
    // HERE replace the value with the text you want to be displayed near Select
    var txtsl2 = 'Select Region:';
     Property with options for the Seccond select list
     The key in this object must be the same with the values of the options added in the first select
     The values in the array associated to each key represent options of the seccond select
    SList.slist2 = {
     "1": ['Alabama', 'Alaska', 'Arizona'],
     "2": ['Alberta', 'British Columbia', 'Manitoba']
     Property with text-content associated with the options of the 2nd select list
     The key in this object must be the same with the values (options) added in each Array in "slist2" above
     The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
    SList.scontent = {
     "Alabama": 'ya kno?',
     "Alaska": 'sleepy',
     "Arizona": 'okok',
     "Alberta": 'please work',
     "British Columbia": 'humhum',
     "Manitoba": 'myu'
        /* From here no need to modify */
    // function to get the dropdown list, or content
    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 if(slist == 'slist2') {
          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>';
          document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
      else if(slist == 'slist2') {
        // empty the tag for 2nd select list
        document.getElementById('slist2').innerHTML = '';
    Last edited by Force Flow; Jun 25, 2013 at 12:46. Reason: added code tags


Posting Permissions

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