I have 2 dropdown list in my html. Is possible for me to populate the option values in the second dropdown list depend on what I select in the first one? Thank you.
@HaganeNoKokoroSep 13.2004 — #Sure it's possible <i> </i>var listValues = ["Option1,1", "Option2,2", "Option3,3"] function populateList(id) { var pList = document.getElementById(id);
//delete old options for(var i=0; i<pList.options.length; i++) pList.remove(0);
//create new option (repeat the stuff below as neccesary) for(var i=0; i<listValues.length; i++) { var obj = document.createElement("OPTION"); var valtext=listValues[i].split(","); //fill in option data obj.text=valtext[0]; obj.value=valtext[1]; //add option to select pList.add(obj); } }
Of course, you will want to modify this a little so it has multiple option/value sets for each of the options on the first menu, but this will give you a good idea of how to start. Also keep in mind that if you want your form to be usable for people without javascript, you will have to have all options in the second list and then remove them in the page onload handler, so that they will be available for non-JS users.