Here's what I'm trying to do...I have a form on a site, and I want to have it so a when a user selects an option from one dropdown box, that the options change on the second dropdown box depending on what they selected in the first. Example: First box has makes of Vehicles..(Toyota, Honda, Ford, etc). When someone chooses "Ford" in the first dropdown box...I want the second box to show the available models from Ford (Fusion, F150, Mustang) etc. Is there an easy javascript or simple code someone knows to make this work? I was thinking that this is the basics of the code... <select id=sel1 onchange="document.getElementById('sel2').value=this.value"> <option>Please Select</option> <option value="Date 1">Date 1</option> <option value="Date 2">Date 2</option> </select><br> <select id=sel2> <option>Please Select</option> <option value="Date 1">Date 1</option> <option value="Date 2">Date 2</option> </select>
Tutorials: http://www.felgall.com/jstip22a.htm http://www.trans4mind.com/personal_development/JavaScript/tripleMenu.htm Enjoy
Depending on how many variants are going to be in the final drop down list then pure javascript is fine if as per the examples linked above is fairly small. If however you were doing every single car variant as per your own example with a 3rd drop down to go from Ford to Focus to V6 SE FWD then you would really need to look at an Ajax solution as to load all 30,000+ variants plus the javascript to link up the menus would give a massive file size for the page if using pure javascript http://www.skillfusion.com/articles/ajaxDropdown.php has an example of how to do this - we use .Net and it has built in components to do this so cannot vouch for the links quality
I'm only going to have the first box be Make and the second box be Model..I don't think I'm going to get into more than that for this form
It doesnt matter either how many drop downs you have etc but simply the total number of variants in the final list. If it is many then use ajax, if it is a few then use javascript.
See also, my code here: http://ajaxforums.net/index.php?topic=858.0 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> var cities =[]; cities["CA"] = ["Sacramento","San Diego","San Francisco","Los Angeles"]; cities["OH"] = ["Cleveland","Akron","Canton","Cincinnati","Columbus"]; cities["PA"] = ["Philadelphia","Pittsburgh","Harrisburgh"]; function fillSelect(nValue,nList){ nList.options.length = 1; var curr = cities[nValue]; for (each in curr) { var nOption = document.createElement('option'); nOption.appendChild(document.createTextNode(curr[each])); nOption.setAttribute("value",curr[each]); nList.appendChild(nOption); } } </script> <style type="text/css"> body {background-color:#eae3c6;margin-top:60px} form {width:330px;margin:auto} fieldset {width:330px;background-color:#f0fff0;border:1px solid #87ceeb} legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px} label {font-family:times;font-size:12pt;color:#00008B;padding:5px} select {font-family:tahoma;font-size:10pt;width:125px;margin-left:27px} .submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px} </style> </head> <body> <form method="post" action=""> <fieldset> <legend>Form</legend> <select name='states' onchange="fillSelect(this.value,this.form['cities'])"> <option value="">Select Your State</option> <option value="CA">California</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> </select> <select name='cities'> <option value="">Select Your City</option> </select> <input type='submit' name='submit' value="Submit" class='submitBtn'> </fieldset> </form> </body> </html> Code (markup):