www.webdeveloper.com
Results 1 to 3 of 3

Thread: Double selection dropdown lists

  1. #1
    Join Date
    Feb 2012
    Posts
    15

    Double selection dropdown lists

    Hi, I am currently having a ready code which has mostly what I want but it is set for three dropdown boxes, I would like to change these couple things:

    * Disable the third dropdown
    * Make them always visible, as the seconde one only showing after the first has been chosen.

    Here is the code:

    Code:
    <!-- The first select list -->
    Select Option: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
     <option>- - -</option>
     <option value="s1_opt1">S1 Option1</option>
     <option value="s1_opt2">S1 Option2</option>
    </select>
    <!-- Tags for the other 2 dropdown list, and for text-content -->
    <span id="slist2"></span> <span id="slist3"></span> <div id="scontent"></div>
    
    <script><!--
    /* Script Triple Select Dropdown List, from: www.coursesweb.net/javascript/ */
    var SList = new Object();             // JS object that stores data for options
    
    // HERE replace the values with the text you want to be displayed near Select
    var txtsl2 = 'Select Option:';         // text for the seccond dropdown list
    var txtsl3 = 'Select Option:';         // text for the third dropdown list
    
    /*
     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 = {
     "s1_opt1": ['s1o1_opt1', 's1o1_opt2'],
     "s1_opt2": ['s1o2_opt1', 's1o2_opt2'],
    };
    
    /*
     Property with options for the Third select list
     The key in this object must be the same with the values (options) added in each Array in "slist2" above
     The values in the array associated to each key represent options of the third select
    */
    SList.slist3 = {
     "s1o1_opt1": ['s2o1_1_opt1', 's2o1_1_opt2'],
     "s1o1_opt2": ['s2o1_2_opt1', 's2o1_2_opt2'],
     "s1o2_opt1": ['s2o2_1_opt1', 's2o2_1_opt2'],
     "s1o2_opt2": ['s2o2_2_opt1', 's2o2_2_opt2'],
    };
    
    /*
     Property with content associated to the options of the third select list
     The key in this object must be the same with the values (options) added in each Array in "slist3" above
     The values of each key represent the content displayed after the user selects an option in 3rd dropdown list
    */
    SList.scontent = {
     "s2o1_1_opt1": '<a href="a.htm">a link</a> <img src="img.jpg"</src>',
     "s2o1_1_opt2": '<a href="b.htm">b link</a> <img src="img.jpg"</src>',
     "s2o1_2_opt1": '<a href="c.htm">c link</a> <img src="img.jpg"</src>',
     "s2o1_2_opt2": 'Content for s2o1_2_opt2',
     "s2o2_1_opt1": 'Content for s2o2_1_opt1',
     "s2o2_1_opt2": 'Content for s2o2_1_opt2',
     "s2o2_2_opt1": 'Content for s2o2_2_opt1',
     "s2o2_2_opt2": 'Content for s2o2_2_opt2',
    };
    
        /* 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 {
          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 = '';
        }
      }
    }
    --></script>
    Appreciating your help so far I couldn't do it alone.

  2. #2
    Join Date
    Feb 2012
    Posts
    15

    Forgot about something important

    also need the second dropdown to change based on the first one's choice..

    It sounds allot but any help would be great.

    Thank you.

  3. #3
    Join Date
    Feb 2012
    Posts
    15

    ignore my last thread

    just need to know how to erase the third dropdown and how to make them always appear, based on the code above.


    Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles