Web Development Training System

Form Select Change Dynamic List Option Elements Tutorial

Learn how to program dynamic select form list elements. To demonstrate the logic we will show how to change options of a select list based on the selection the user makes from the first list. A web application developer will definitely need to know how to do this when they get into form programming that involves data intake of categories and subcategories from a user. <!DOCTYPE html> <html> <head> <script> function populate(s1,s2){ var s1 = document.getElementById(s1); var s2 = document.getElementById(s2); s2.innerHTML = ""; if(s1.value == "Chevy"){ var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"]; } else if(s1.value == "Dodge"){ var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"]; } else if(s1.value == "Ford"){ var optionArray = ["|","mustang|Mustang","shelby|Shelby"]; } 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); } } </script> </head> <body> <h2>Choose Your Car</h2> <hr /> Choose Car Make: <select id="slct1" name="slct1" onchange="populate(,'slct2')"> <option value=""></option> <option value="Chevy">Chevy</option> <option value="Dodge">Dodge</option> <option value="Ford">Ford</option> </select> <hr /> Choose Car Model: <select id="slct2" name="slct2"></select> <hr /> </body> </html>