www.webdeveloper.com
Results 1 to 3 of 3

Thread: Three column Dependent Dropdown list

  1. #1
    Join Date
    Mar 2014
    Posts
    2

    Three column Dependent Dropdown list

    HI All

    I am trying to Implement three column Dependent Dropdown list and i am able to to so with with below code but problem is this code is working fine for single row only if I add one more row below working row then both stop working.

    With First column selection I want to make automatic section for 2nd and 3rd column also 3rd column should dependent on 2nd column.

    Please suggest what can be alternative.

    <html>
    <head>
    <script type="text/javascript">

    function setOptions(chosen) {
    var selbox = document.myform.opttwo;

    selbox.options.length = 0;
    if (chosen == " ") {
    selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');

    }
    if (chosen == "1") {
    selbox.options[selbox.options.length] = new
    Option('Amy','oneone');

    }
    if (chosen == "2") {
    selbox.options[selbox.options.length] = new
    Option('Jhon','twoone');
    selbox.options[selbox.options.length] = new
    Option('Amy','twotwo');
    }
    if (chosen == "3") {
    selbox.options[selbox.options.length] = new
    Option('Ragina','threeone');
    selbox.options[selbox.options.length] = new
    Option('Lucy','threetwo');
    }

    //box 3 dropdown

    var selbox = document.myform.opttwoo;

    selbox.options.length = 0;

    if (chosen == "1") {
    selbox.options[selbox.options.length] = new
    Option('185321','oneone');

    }
    if (chosen == "2") {
    selbox.options[selbox.options.length] = new
    Option('202483','twoone');
    selbox.options[selbox.options.length] = new
    Option('185321','twotwo');
    }
    if (chosen == "3") {
    selbox.options[selbox.options.length] = new
    Option('170335','threeone');
    selbox.options[selbox.options.length] = new
    Option('127530','threetwo');
    }


    }

    </script>
    </head>
    <body>

    <form name="myform" id="exm1" action="ajax.php" method="post">


    <table width="100%" border="1">

    <td><select name="optone" size="1"
    onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
    <option value=" " selected="selected"> </option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    </select></td>

    <td><select name="opttwo" size="1">
    <option value=" " selected="selected"></option>
    </select></td>

    <td><select name="opttwoo" size="1">
    <option value=" " selected="selected"></option></td>


    </table>


    </form>

    </body>
    </html>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,681
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    var Options1=[];
     Options1['0']=[['Please select one of the options above first','na']];
     Options1['1']=[['Amy','oneone']];
     Options1['2']=[['Jhon','twoone'],['Amy','twotwo']];
     Options1['3']=[['Ragina','threeone'],['Lucy','threetwo']];
    
    var Options2=[];
     Options2['0']=[['','na']];
     Options2['1']=[['185321','oneone']];
     Options2['2']=[['202483','twoone'],['185321','twotwo']];
     Options2['3']=[['170335','threeone'],['127530','threetwo']];
    
    var Options3=[];
     Options3['oneone']=[['1','na']];
     Options3['twoone']=[['2','na']];
     Options3['twotwo']=[['3','na']];
     Options3['threeone']=[['4','na']];
     Options3['threetwo']=[['5','na']];
    
    function setOptions(s,t,a){
     var frm=s.form,chosen=s.value,selbox=frm[t];
     if (selbox){
      selbox.options.length = 0;
      if (a[chosen]){
       a=a[chosen];
       for (var z0=0;z0<a.length;z0++){
        selbox.options[z0] = new Option(a[z0][0],a[z0][1]);
       }
      }
     }
    
    
    }
    
    </script>
    </head>
    <body>
    
    <form name="myform" id="exm1" action="ajax.php" method="post">
    
    
    <table width="100%" border="1">
     <tr>
    <td>
    <select name="optone" size="1" onchange="setOptions(this,'opttwo',Options1);setOptions(this,'opttwoo',Options2);">
    <option value="0" selected="selected"> </option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    </select></td>
    
    <td><select name="opttwo" size="1" onchange="setOptions(this,'opttwoo',Options3);">
    <option value=" " selected="selected"></option>
    </select></td>
    
    <td><select name="opttwoo" size="1">
    <option value=" " selected="selected">
    </option>
    </td>
    </tr>
    <td>
    <select name="optone2" size="1" onchange="setOptions(this,'opttwo2',Options1);setOptions(this,'opttwoo2',Options2);">
    <option value="0" selected="selected"> </option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    </select></td>
    
    <td><select name="opttwo2" size="1" onchange="setOptions(this,'opttwoo2',Options3);" >
    <option value=" " selected="selected"></option>
    </select></td>
    
    <td><select name="opttwoo2" size="1">
    <option value=" " selected="selected">
    </option>
    </td>
    </tr>
    
    
    </table>
    
    
    </form>
    
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Mar 2014
    Posts
    2
    Thanks vwPhillips..
    Working Great ..

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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