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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts

    dropdownlists dependencies

    HI peers,

    i have a dropdownlist that can take one of the following : "PEX","IR","LT"
    i need to have another dropdownlist that shows different values based on the above selected one

    I.E
    if i choose " "1" i want to have the 2nd DDL showing ( orange, apple, bananas)
    if i choose "2" i ll have a the 2nd DDL showing another list of items

    HOW CAN I DO THIS PLEASE !!

    THANKS

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Modify this to your needs...
    Code:
    <html>
    <head>
    <title>Populate Drop Down List</title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=152899
    // And: http://www.codingforums.com/newreply.php?do=postreply&t=238054
    
    var SelectInformation = [
      ['Main 1','Sub 1-1','Sub 1-2','Sub 1-3'],
      ['Main 2','Sub 2-1','Sub 2-2'],
      ['Main 3','Sub 3-1','Sub 3-2','Sub 3-3','Sub 3-4']  // Note: no comma on last entry
    ];
    // Above is sample format for information from a database.
    
    function MainList(selObj) {
      var selElem = document.getElementById(selObj);
      var tmp = '';
      selElem.options.length = 0;
    //  selElem.options[selElem.options.length] = new Option(tmp,tmp);  // for blank display
      selElem.options[selElem.options.length] = new Option('Select',tmp);
      for (var i=0; i<SelectInformation.length; i++) {
        tmp = SelectInformation[i][0]
        selElem.options[selElem.options.length] = new Option(tmp,SelectInformation[i].join(',')); 
      }
    }
    
    function SubList(newObj,info) {
      var newElem = document.getElementById(newObj);    //    alert(info);
      var Arr = info.split(',');
      newElem.options.length = 0;
      for (var i=0; i<Arr.length; i++) {
        tmp = Arr[i];
        if (i != 0) { newElem.options[newElem.options.length] = new Option(tmp,tmp); }
      }
    }
    
    </script>
    </head>
    <body onload="MainList('SBox0')">
    
    <table>
      <tr>
        <td>
          <select id="SBox0" onchange="SubList('SBox1',this.value)">
          <option value=""></option>
          </select>
        </td>
        <td>
          <select id="SBox1">
          <option value=""></option>
          </select>
        </td>
      </tr>
    </table>
    
    </body>
    </html>


  •  

    Posting Permissions

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