I have this code below that Mike H. was helpful enough to give me, and now I have another question to ask. If you can select one drop down list and it auto populates another drop down list. Can you select the first drop down list, and have a value populate as selected in the second drop down list? example: I select state1 on the first drop down list, and then the other drop down list selects the capital automatically. <!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):
<!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 capitals = []; capitals["CA"] = ["Sacramento"]; capitals["OH"] = ["Columbus"]; capitals["PA"] = ["Harrisburg"]; var cities = []; cities["CA"] = ["Sacramento","San Diego","San Francisco","Los Angeles"]; cities["OH"] = ["Cleveland","Akron","Canton","Cincinnati","Columbus"]; cities["PA"] = ["Philadelphia","Pittsburgh","Harrisburg"]; 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); } for (i=1; i<nList.length; i++) { if (nList[i].value == capitals[nValue][0]) { nList.selectedIndex = i; } } } </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):
Mike, Thank you so much for your help! Are there any JavaScript books you suggest I read? I am trying to do some research into what books other programmers liked before I buy my own, thanks again.
You're welcome, but I don't know any books to recommend. I learned, over several years, on my own, mostly by day after day, trying to solve problems posted by others on WebDeveloper.com and other forums, and posting my code. One day you realize that you "get it" and you can actually post working code.
I will take your advice and see what I can tackle on as many forums as I can. Thanks again, wish me luck!
Yes, certainly. Good luck. The best thing to do when someone mocks, ridicules or otherwise insults you, is to ignore them. Don't ever give in to the temptation to respond. Nothing, nothing angers them more than silence. They expect you to bend to their whim, they expect you to "submit" your code for their approval. Nothing angers them more than your refusal to play that game. If you think that none of that will happen, think again. EVERY forum has a few who believe themselves to be as gods, and expect you to worship them, literally, expect you to worship them.
Mike, I am trying to put this code into a program that requires it to be xml compliant. When I try to parse the code I get the following error: Invalid XML: A name contained an invalid character. and this is the line it gave: for (i=1; i<nList.length; i++) Code (markup): I believe it is the < less than symbol that is breaking it. Any suggestions? Thanks.
Try: for (each in nList) { if (nList[each].value == capitals[nValue][0]) { nList.selectedIndex = i; } } Code (markup):
so here is the new code: <!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 capitals = []; capitals["CA"] = ["Sacramento"]; capitals["OH"] = ["Columbus"]; capitals["PA"] = ["Harrisburg"]; var cities = []; cities["CA"] = ["Sacramento","San Diego","San Francisco","Los Angeles"]; cities["OH"] = ["Cleveland","Akron","Canton","Cincinnati","Columbus"]; cities["PA"] = ["Philadelphia","Pittsburgh","Harrisburg"]; 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); } for (each in nList) { if (nList[each].value == capitals[nValue][0]) { nList.selectedIndex = i; } } } </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): It parses right, but now it doesn't automatically select the states capital.
I know. This way works: 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); } var i = 0; for (each in curr) { i++; if (curr[each] == capitals[nValue][0]) { nList.selectedIndex = i; } } } Code (markup):