I'm trying to create a dynamic menu on a HTML web page using JavaScript, but keep having trouble -
okay here html code
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>menus</title> <script type="text/javascript" src="cities.js"> </script> </head> <body> <select id="countries" name="countries" onchange="populate('countries','cities')"> <option value="">country</option> <option value="ireland">ireland</option> <option value="romania">romania</option> <option value="england">england</option> <option value="spain">spain</option> <option value="germany">germany</option> </select> <select id="cities" name="cities"> <option value="">cities</option> </select> </form> </body> </html>
okay, seems here far , here javascript code
//populates countries , cities select form elements function populate(s1,s2) { var s1 = document.getelementbyid(s1);//s1==countries var s2 = document.getelementbyid(s2);//s2==cities s2.innerhtml=""; /** * if s1==ireland print dublin */ if(s1.value=="ireland"){ var optionarray = ["|", "dublin|dublin"]; } /** * if s1==romania print bucharest */ else if (s1.value=="romania"){ var optionarray=["|", "bucharest|bucharest"]; } /** * if s1==england print liverpool */ else if (s1.value=="england"){ var optionarray=["|", "liverpool"|"liverpool"]; } /** * if s1==spain print madrid */ else if (s1.value=="spain") { var optionarray=["|", "madrid"|"madrid"]; } /** * if s1==germany print munich */ else if (s1.value=="germany"){ var optionarray=["|","munich"|"munich"]; } for(var option in optionarray){ var pair = optionarray[option].split("|"); var newoption = document.createelement("option"); newoption.value = pair[0]; newoption.innerhtml=pair[1]; s2.options.add(newoption); } }
as can see i'm trying create if , if else statements if select element html file selected print out city country.
now weird part works ireland , romania , when selected have option select dublin or bucharest other drop down menu, not work of other 3 countries?
now seeing works first 2 select elements makes me think there problem either in loop or html code i'm not entirely sure. might small problem staring me in face can't see.
any appreciated, thank you.
like andreas mentioned problem lies quotes in optionsarray assigment in first 2 correct:
var optionarray = ["|", "dublin|dublin"]
after this:
var optionarray=["|", "liverpool"|"liverpool"]
see quotes
here corrected example made you.
Comments
Post a Comment