I'm having trouble finding a script that if a value is selected in one drop down menu, it changes the list for another drop down menu. Does anyone have a similar script to share? An example would be, there are two drop down boxes. One for state and one for counties. When a state is selected, all the counties are pre-populated in the second drop down box. Any suggestions? Thanks!
<!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):
Hey, I'm really new to all this- and was wondering if anyone could help. I'm trying to add 2 store products (one is a Tshirt, the other a strap top), but I need three drop down menus with different variables- 1) product (tshirt or top) 2) Colour (both tshirt and top have different colour choices) 3) Sizes I've worked out how to use the code above for the product and colour, but I can't work out how to add the size : ( can anyone help at all?? I'd really appreciate it so much!! My email is: Thank you! Leah xoxo
<!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 categories = []; // Option Text|Option Value; categories['Kids'] = ['Birthday|Birthday','Christmas|Christmas']; categories['Adults'] = ['Birthday|Birthday','Christmas|Christmas','Corporate|Corporate']; categories['Mixed'] = ['Birthday|Birthday','Christmas|Christmas','Corporate|Corporate']; categories['Birthday'] = ['Disney|DisneyValue','Pirates|PriatesValue','Princess|PrinessValue','Ballet|BalletValue','Magic|MagicValue','Surfer|SurferValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\'s|50\'sValue','Rock & Roll|RRValue','Horses|HorsesValue','Zoo|ZooValue']; categories['Christmas'] = ['Magic|MagicValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\s|50\'sValue']; categories['Corporate'] = ['Magic|MagicValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\s|50\'sValue','Rock & Roll|RRValue']; var dynList = ['partyType','theme']; // the "names" of the dynamic lists, as they occur in the form; function fillSelect(currCat,currList,step){ for (i=step; i<dynList.length; i++) { document.forms[0][dynList[i]].length = 1; document.forms[0][dynList[i]].selectedIndex = 0; } var nCategory = categories[currCat]; for (each in nCategory) { var nOption = document.createElement('option'); var nInfo = nCategory[each].split("|"); nOption.setAttribute('value',nInfo[1]); nOption.appendChild(document.createTextNode(nInfo[0])); currList.appendChild(nOption); } } </script> <style type="text/css"> body {background-color:#eae3c6;margin-top:60px} form {width:300px;margin:auto} fieldset {width:300px;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:times;font-size:10pt;width:150px;display:block;margin-left:auto;margin-right:auto;margin-top:8px} .submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px} </style> </head> <body> <form method="post" action=""> <fieldset> <legend>Party Planner</legend> <select name="ageGroup" onchange="fillSelect(this.value,this.form['partyType'],0)"> <option value="">- Age Group -</option> <option value="Kids">Kids (up to 21)</option> <option value="Adults">Adults (21 and up)</option> <option value="Mixed">Kids and Adults</option> </select> <select name="partyType" size="1" onchange="fillSelect(this.value,this.form['theme'],1)"> <option value="">- Party Type -</option> </select> <select name="theme"> <option value="">- Party Theme -</option> </select> <input type='submit' name='submit' value="Submit" class='submitBtn'> </fieldset> </form> </body> </html> Code (markup):
Hi Mike, Your code works perfectly. Thanks for the share. My requirement is an addition to what you have given. Basically, when I select State as California and City as San Diego and when I click on Submit, it should redirect me to a webpage. So I want the submit button to redirect me to different pages based on what I have selected from the dropdown list. Thanks n Regards Dev