www.webdeveloper.com
Results 1 to 13 of 13

Thread: 2 dynamic dropdown boxes

  1. #1
    Join Date
    Sep 2004
    Posts
    219

    2 dynamic dropdown boxes

    hi guys,

    this may be the wrong forum (if it is sorry, and can you please move) but i was wondering what it is called when you have a dropdown box (list is from a Database) and when you select a option it will determine the contents of the next box (also from a DB) and the change will happen as soon as the user clicks the first dropdown box (kinda update the page automatically)

    i think this is done with javascript... i know how to do it for one, but for two i cannot find a good example.

    if anyone can give me some key words or a link id be happy

    thanks!

  2. #2
    Join Date
    Jun 2004
    Location
    4846′36″ N 910′48″ E
    Posts
    3,747
    it would be done in both javascript to change the content of the second "box" and in a server-side language to interact with the database

  3. #3
    Join Date
    Sep 2004
    Posts
    219
    Hi there,

    Thanks for your reply.

    i have it working but with a button in between.

    for example.

    select option from drop down list (from a DB)

    click a button

    then second drop down list appears with a list based on the first option.

    now i want this all to happen how it is but 'without' the button in the middle.

    any suggestions or links or posts or sites?

    im having trouble finding anything!

    Thanks

  4. #4
    Join Date
    Aug 2005
    Location
    The Garden State
    Posts
    5,634
    if you have the button defined using javascript:doChange() you can define the select list with onChange=doChange()

  5. #5
    Join Date
    Sep 2004
    Posts
    219
    hi, thanks for your reply.

    could you please explain yourself a little more?

    i dont quite understand. but when i have some time to work on it i will google what you said and try and make some sense of it!

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Use an onchange handler in the select.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  7. #7
    Join Date
    Sep 2004
    Posts
    219
    hey ray326,

    long time no hear! (my bad havent been posting but been reading!)

    i will try that out tomorow, and let you kknow if anymore probs, thanks

  8. #8
    Join Date
    Sep 2004
    Posts
    219
    hi guys,

    i have found this example which is great but the options are hard coded into the javascript.

    http://www.felgall.com/jstip22.htm (the the code below)

    what if the options are out of a DB how would i do that?

    HTML Code:
    <form name="myform"><div align="center">
    <select name="optone" size="1"
    onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
    <option value=" " selected="selected"> </option>
    <option value="1">First Choice</option>
    <option value="2">Second Choice</option>
    <option value="3">Third Choice</option>
    </select><br /> <br />
    <select name="opttwo" size="1">
    <option value=" " selected="selected">Please select one of the options above first</option>
    </select>
     input type="button" name="go" value="Value Selected"
    onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
    </div></form> 
    Code:
    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('first choice - option one','oneone');
      selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
    }
    if (chosen == "2") {
      selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
      selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
    }
    if (chosen == "3") {
      selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
      selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
    }
    }

  9. #9
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    That's going to really be dependent on the server technology (PHP, ASP, JSP, CGI/Perl) in use. In Java I would pull the options from the database, put them in some kind of collection and put that collection in the request before forwarding to this (JSP) page. The code in the page might then build what appears to be "hard coded" above on the fly as the page is rendered. PHP and ASP can implement similar patterns; I just don't think in them.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  10. #10
    Join Date
    Sep 2004
    Posts
    219
    Thanks Ray will try that out!

  11. #11
    Join Date
    Sep 2004
    Posts
    219
    ok i have added in 'onchange' etc to the first select box to make the second one up date.

    that is all good with 'set' options for the second box in javascript.

    now how do i make the second box's options in javascript dynamic?

    can someone explain please?

    i am using php, and i have followed the javascript example a few replys up.

    thanks

  12. #12
    Join Date
    Sep 2004
    Posts
    219
    here is what i have so far:

    Code:
    <form name="myform">
    <select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
    <option value=" " selected="selected">Select Dept</option>
      <?php
       include("conection.php");
    
         $query = "select DISTINCT(e_dept) from tbl_emp";
         $result = mysql_query($query);
         $num_results = mysql_num_rows($result);
    
         for ($i=0; $i <$num_results; $i++)
         {
         $row = mysql_fetch_array($result);
    
         $e_dept = $row['e_dept'];
      ?>
    <option value="<?php echo $i; ?>"> <?php echo $e_dept; ?> </option>
      <?php } ?>
    </select>
    
    
    <br /> <br />
    
    <select name="opttwo" MULTIPLE>
    <option value=" " selected="selected">Please select one of the options above first</option>
    </select>

    now how do i submit that option picked in the first combo box back to the page, grab it, query it again, and output the javascript options instead of the predefined options below?

    note: i put $i for a selection option just to get the example to spit something out for the next combo box/

    thank you any help would be great..
    Code:
     
    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('first choice - option one','oneone');
      selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
    }
    if (chosen == "2") {
      selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
      selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
    }
    if (chosen == "3") {
      selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
      selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
    }
    }

  13. #13
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    You don't do it on the page you do it on the server. When you generate the response page you only write the correct option list based on the previously submitted selection.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

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