www.webdeveloper.com
Results 1 to 12 of 12

Thread: Dependent Drop Down Lists

  1. #1
    Join Date
    Mar 2009
    Posts
    74

    Dependent Drop Down Lists

    Hi,
    I'm new to Javascript. I have a simple (I hope) request:

    I have 2 simple drop down lists in a form where the first one (say foods) displays :
    -Meat
    -fruit
    -vegatables

    Based on what is selected (say fruit)
    The second dropdown would display :
    -apples
    -pears
    -bananas

    I only have 5 categories and 6 for each subcategory. No DB access is needed for this.

    I am working in Coldfusion 8 and it does provide a convoluted AJAX solution which generates a ton of code.

    Any simpler Javascript would be appreciated.

    Thanks,
    hefterr

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>select change 2nd select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    var varieties=[
    ["varieties","granny smith","golden delicious","jonathan"],
    ["varieties","anjou","bartlett","conference"],
    ["varieties","valencia","pineapple","pera"]
    ];
    
    function Box2(idx) {
    var f=document.myform;
    f.box2.options.length=null;
    for(var i=0; i<varieties[idx].length; i++) {
    	f.box2.options[i]=new Option(varieties[idx][i], i); 
        }    
    }
    
    window.onload=function() {
    var box1=document.myform.box1;
    box1.onchange=function(){Box2(this.selectedIndex);};
    // create 2nd select
    try { // IE
      var sel=document.createElement("<select name=\"box2\"><\/select>");
      }
    catch(e) {
      var sel=document.createElement("select");
      sel.name = "box2";
      }
    document.myform.getElementsByTagName('fieldset')[0].insertBefore(sel, box1.nextSibling);
    // fill 2nd select
    Box2(0);
    }
    </script>
    
    </head>
    <body>
    <form name="myform" method="post" action="http://www.mysite.com/mysite">
    <fieldset><legend>fruit</legend>
    <select name="box1">
        <option value="a">apple</option>
        <option value="b">pear</option>
        <option value="c">orange</option>
    </select>
    <button type="submit">submit</button>
    </fieldset>
    </form>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Mar 2009
    Posts
    74
    Hi Fang,
    Thanks for the script.

    Can you tell me where I could put HTML/CSS to position the 2nd box as it seems to be created in the script itself. Let's say you want to put the 2nd Select box blelow the first with a line of spaces between? If you give an example I'll get the idea.

    Thanks very much for your time and expertise.
    hefterr

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <style type="text/css">
    select {display:block; margin:1em 0;}
    </style>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Mar 2009
    Posts
    74
    Fang,
    One (ok 2) more question (promise) :

    1) If I wanted to syle one box differently than another how do I identify the 2nd box only(class, ID, Name) as they are both type "Select".

    2) I notice that if I take the Fieldset tags out, I don't get the 2nd list at all?

    Thanks again,
    hefterr
    Last edited by hefterr; 01-07-2010 at 12:17 PM.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>select change 2nd select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    var varieties=[
    ["varieties","granny smith","golden delicious","jonathan"],
    ["varieties","anjou","bartlett","conference"],
    ["varieties","valencia","pineapple","pera"]
    ];
    
    function Box2(idx) {
    var f=document.myform;
    f.box2.options.length=null;
    for(var i=0; i<varieties[idx].length; i++) {
    	f.box2.options[i]=new Option(varieties[idx][i], i); 
        }    
    }
    
    window.onload=function() {
    var box1=document.myform.box1;
    box1.onchange=function(){Box2(this.selectedIndex);};
    // create 2nd select
    try { // IE
      var sel=document.createElement("<select name=\"box2\"><\/select>");
      }
    catch(e) {
      var sel=document.createElement("select");
      sel.name = "box2";
      sel.id = "box2";
      }
    document.myform.getElementsByTagName('fieldset')[0].insertBefore(sel, box1.nextSibling);
    // fill 2nd select
    Box2(0);
    }
    </script>
    <style type="text/css">
    select {display:block; margin:1em 0;}
    #box2 {color:red;}
    </style>
    </head>
    <body>
    <form name="myform" method="post" action="http://www.mysite.com/mysite">
    <fieldset><legend>fruit</legend>
    <select name="box1">
        <option value="a">apple</option>
        <option value="b">pear</option>
        <option value="c">orange</option>
    </select>
    <button type="submit">submit</button>
    </fieldset>
    </form>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    Mar 2009
    Posts
    74
    I think you may have missed my question on Fieldset?

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    For valid html, form elements should be enclosed in a block element. In this case a fieldset is used. A div could also be used.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>select change 2nd select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    var varieties=[
    ["varieties","granny smith","golden delicious","jonathan"],
    ["varieties","anjou","bartlett","conference"],
    ["varieties","valencia","pineapple","pera"]
    ];
    
    function Box2(idx) {
    var f=document.myform;
    f.box2.options.length=null;
    for(var i=0; i<varieties[idx].length; i++) {
    	f.box2.options[i]=new Option(varieties[idx][i], i); 
        }    
    }
    
    window.onload=function() {
    var box1=document.myform.box1;
    box1.onchange=function(){Box2(this.selectedIndex);};
    // create 2nd select
    try { // IE
      var sel=document.createElement("<select name=\"box2\"><\/select>");
      }
    catch(e) {
      var sel=document.createElement("select");
      sel.name = "box2";
      sel.id = "box2";
      }
    document.myform.getElementsByTagName('div')[0].insertBefore(sel, box1.nextSibling);
    // fill 2nd select
    Box2(0);
    }
    </script>
    <style type="text/css">
    select {display:block; margin:1em 0;}
    #box2 {color:red;}
    </style>
    </head>
    <body>
    <form name="myform" method="post" action="http://www.mysite.com/mysite">
    <div>
    <select name="box1">
        <option value="a">apple</option>
        <option value="b">pear</option>
        <option value="c">orange</option>
    </select>
    <button type="submit">submit</button>
    </div>
    </form>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  9. #9
    Join Date
    Feb 2014
    Posts
    2
    I have a few questions.
    Can you specify values for the options in the varieties box 2 drop down?
    If you added a 3rd drop down, how would you make it refresh its display if the 1st or second dropdown changed?
    How would you be able to retrieve what the final selection was for varieties box2?

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355

    Lightbulb

    Modifications of post #8 in RED
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>select change 2nd select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    var varieties=[
       ["varieties|","granny smith|1","golden delicious|2","jonathan|3"],
       ["varieties|","anjou|4","bartlett|5","conference|6"],
       ["varieties|","valencia|7","pineapple|8","pera|9"]
    ];
    
    function Box2(idx) {
      var f=document.myform;
      f.box2.options.length=null;
      var tmp;
      for(var i=0; i<varieties[idx].length; i++) {
        tmp = varieties[idx][i].split('|');
        f.box2.options[i]=new Option(tmp[0],tmp[1]); 
      }    
    }
    
    window.onload=function() {
      var box1=document.myform.box1;
      box1.onchange=function(){Box2(this.selectedIndex);};
    // create 2nd select
     try { // IE
      var sel=document.createElement("<select name=\"box2\"><\/select>");
      }
     catch(e) {
      var sel=document.createElement("select");
      sel.name = "box2";
      sel.id = "box2";
      }
      document.myform.getElementsByTagName('div')[0].insertBefore(sel, box1.nextSibling);
    // fill 2nd select
      Box2(0);
    }
    </script>
    <style type="text/css">
    select {display:block; margin:1em 0;}
    #box2 {color:red;}
    </style>
    </head>
    <body>
    <!-- <form name="myform" method="post" action="http://www.mysite.com/mysite"> -->
    <form name="myform" method="post" action="" onsubmit="return false"> <!-- for testing purposes only -->
    
    <div>
    <select name="box1">
        <option value="a">apple</option>
        <option value="b">pear</option>
        <option value="c">orange</option>
    </select>
    <button type="submit">submit</button>
    </div>
    </form>
    
    <p>
    <button onclick="alert(getElementById('box2').value)"> Variety Value </button>
    </body>
    </html>
    NOTE also: You really should start your own thread with a reference to this one
    rather than hijack the original OP thread.

  11. #11
    Join Date
    Feb 2014
    Posts
    2
    Thank you for your reply. I apologize for my error.

  12. #12
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355
    Quote Originally Posted by ITAdmn View Post
    Thank you for your reply. I apologize for my error.
    No problem. Just makes it easier to read if threads don't go on forever.

    BTW: Did you solve your 3rd selection option problem? If not, there are other solutions available.

    Good Luck!

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