Create 3 drop downs related to each other

Question

I need to create 3 dependent drop downs related to each other. So if the first one is selected, related data will be shown in the 2nd drop down, and when an option is selected in the second drop down, in the 3rd drop down some related data will be shown.

And i need to use $_GET on this form, so if a specific option in the second one is slected a massage shows up, and when an option is the 3rd drop down is seleted, the page redirects for example to www.google.com. And i need two none related data in the first filed, so when they are selected, the page redirects for exaple to www.msn.com.

I know it needs JavaScript, but unfortunately I do not know JS for now.

And please do not use " this.value" for sending parameters to JavaScript, because it conflicts with one of my other codes.

( And I don't want the page to reload )

something like this :

Drop down 1  ----------------------- drop down 2  ----------------------- drop down 3

option 1 ( redirect to msn.com)

option 2 ==========================> Option 100 ======================> Option 500
                                     Option 101                         Option 501
Option 3 (redirect to google.com)    Option 102 (message:Hello )
                                     Option 103 ======================> Option 700
                                                                        Option 701

I tried hard to explain it, I hope you get what I was trying to say.

Thanks for your help.

Answer 1

Here is a quick and dirty answer...

    <html>
      <head>
        <script type='text/javascript'>
          var drop3Options = {"100":["500","501"],"103":["700","701"]};
          function drop1Change(){
            var value = document.getElementById("drop1").value;
            if(value == "msn")
              window.location.href = "http://www.msn.com";
            else if(value == "google"){
              window.location.href = "http://www.google.com";
            }                
          }
          function drop2Change(){
            var value = document.getElementById("drop2").value;
            var drop3List = document.getElementById("drop3");
            if(drop3Options[value]){
              drop3List.options.length = 0;
              for(var i = 0; i < drop3Options[value].length; i++){
                drop3List.options[i] = new Option(drop3Options[value][i],drop3Options[value][i]);
              }
            }
          }
        </script>
      </head>

      <body>
        <form method='GET' action='serverScript.php'>
          <select id='drop1' onchange='drop1Change()'>
            <option value='msn'>MSN</option>
            <option value='dr2'>DROP 2</option>
            <option value='google'>GOOGLE</option>  
          </select>

          <select id='drop2' onchange='drop2Change()'>
            <option value='100'>100</option>
            <option value='101'>101</option>
            <option value='102'>102</option>  
            <option value='103'>103</option>              
          </select>         

          <select id='drop3'>
            <option value='500'>500</option>
            <option value='501'>501</option>
          </select>
          <input type='submit' value='SUBMIT'/>
        </form>
      </body>
    </html>

Obviously I don't know what exactly you are using this script to do, so it is hard for me to make assumptions and give you better code, but this will do what I understood the question to be.. I also don't know what server side scripts you will be sending this to. But just change the ACTION attribute in the form to reflect the location of the server script..

The javascript has one global variable (drop3Options). This is an object with two properties which hold 2 arrays for the select 3 options..

So drop3Options['100'] holds an array ['500','501'] and drop3Options['103'] holds an array ['700','701']

when you change a selection box, it calls the appropriate method, this is done by adding the "onchange" attribute to each select element, and it calls the function which looks at the value and does things accordingly

I assume you will need to do more than this, so comment with more specifics and I will gladly help

Create 3 drop downs related to each other

Question

1 answers

solution1
2 ACCPTED 2012-05-28 20:11:34

Create 3 drop downs related to each other

Question

1 answers

solution1 2 ACCPTED 2012-05-28 20:11:34

solution1
2 ACCPTED 2012-05-28 20:11:34