第三级onChange事件不起作用。状态列表已显示，但城市未反映出来

Question

 <select id="region" onchange="ChangeStateList()"> <option value="">-- Region --</option> <option value="ANY">ANY</option> <option value="North_DEL">North_DEL</option> <option value="North_HR">North_HR</option> <option value="South_TN">South_TN</option> <option value="South_KK">South_KK</option> </select> <select onchange="ChangeCityList()" id="state"></select> <select id="city"></select> <script> var regionAndStates = {}; regionAndStates['ANY'] = ['--State--', 'ANY', 'Delhi', 'Haryana', 'Tamil Nadu', 'Karnataka']; regionAndStates['North_DEL'] = ['--State--', 'ANY', 'Delhi']; regionAndStates['North_HR'] = ['--State--', 'ANY', 'Haryana']; regionAndStates['South_TN'] = ['--State--', 'ANY', 'Tamil Nadu']; regionAndStates['South_KK'] = ['--State--', 'ANY', 'Karnataka']; function ChangeStateList() { var regionList = document.getElementById("region"); var stateList = document.getElementById("state"); var selState = regionList.options[regionList.selectedIndex].value; while (stateList.options.length) { stateList.remove(0); } var states = regionAndStates[selState]; if (states) { var i; for (i = 0; i < states.length; i++) { var state = new Option(states[i], i); stateList.options.add(state); } } } function ChangeCityList() { var stateList = document.getElementById("state"); var cityList = document.getElementById("city"); var selCity = stateList.options[stateList.selectedIndex].value; while (cityList.options.length) { cityList.remove(0); } var cities = stateAndCities[selCity]; if (cities) { var i; for (i = 0; i < cities.length; i++) { var city = new Option(cities[i], i); cityList.options.add(city); } } } </script> 

国家名单是完全显示在区域的基础上选择，但城市下拉不working.First onChange事件ChangeStateList()工作正常，但第二onChange事件ChangeCityList()不会被触发。 我是JavaScript新手。 请建议更改代码。 我不想用ajax来做。 建议仅使用基本JavaScript。

Answer 1

stateAndCities未定义：

 <select id="region" onchange="ChangeStateList()"> <option value="">-- Region --</option> <option value="ANY">ANY</option> <option value="North_DEL">North_DEL</option> <option value="North_HR">North_HR</option> <option value="South_TN">South_TN</option> <option value="South_KK">South_KK</option> </select> <select onchange="ChangeCityList()" id="state"></select> <select id="city"></select> <script> var regionAndStates = {}; regionAndStates['ANY'] = ['--State--', 'ANY', 'Delhi', 'Haryana', 'Tamil Nadu', 'Karnataka']; regionAndStates['North_DEL'] = ['--State--', 'ANY', 'Delhi']; regionAndStates['North_HR'] = ['--State--', 'ANY', 'Haryana']; regionAndStates['South_TN'] = ['--State--', 'ANY', 'Tamil Nadu']; regionAndStates['South_KK'] = ['--State--', 'ANY', 'Karnataka']; function ChangeStateList() { var regionList = document.getElementById("region"); var stateList = document.getElementById("state"); var selState = regionList.options[regionList.selectedIndex].value; while (stateList.options.length) { stateList.remove(0); } var states = regionAndStates[selState]; if (states) { var i; for (i = 0; i < states.length; i++) { var state = new Option(states[i], i); stateList.options.add(state); } } } function ChangeCityList() { var stateList = document.getElementById("state"); var cityList = document.getElementById("city"); var selCity = stateList.options[stateList.selectedIndex].value; while (cityList.options.length) { cityList.remove(0); } var cities = selCity; if (cities) { var i; for (i = 0; i < cities.length; i++) { var city = new Option(cities[i], i); cityList.options.add(city); } } } </script> 

Answer 2

您正在使用索引作为值，同时在状态下拉列表中附加与源数组不匹配的选项。 将您的状态下拉选项值更改为文本而不是i

  var cityAndStates = {}; cityAndStates['ANY'] = ['--City--', 'ANY', , 'Karol Bagh', 'Indraprastha', 'Patel Nagar', 'Baroda House', 'Palam Vihar', 'Air Force', 'Jharsa', 'Gwal Pahari']; cityAndStates['Delhi'] = ['--City--', 'ANY', 'Karol Bagh', 'Indraprastha', 'Patel Nagar', 'Baroda House']; cityAndStates['Haryana'] = ['--City--', 'ANY', 'Palam Vihar', 'Air Force', 'Jharsa', 'Gwal Pahari']; cityAndStates['Tamil Nadu'] = ['--City--', 'ANY']; cityAndStates['Karnataka'] = ['--City--', 'ANY']; var regionAndStates = {}; regionAndStates['ANY'] = ['--State--', 'ANY', 'Delhi', 'Haryana', 'Tamil Nadu', 'Karnataka']; regionAndStates['North_DEL'] = ['--State--', 'ANY', 'Delhi']; regionAndStates['North_HR'] = ['--State--', 'ANY', 'Haryana']; regionAndStates['South_TN'] = ['--State--', 'ANY', 'Tamil Nadu']; regionAndStates['South_KK'] = ['--State--', 'ANY', 'Karnataka']; function ChangeStateList() { var regionList = document.getElementById("region"); var stateList = document.getElementById("state"); var selState = regionList.options[regionList.selectedIndex].value; while (stateList.options.length) { stateList.remove(0); } var states = regionAndStates[selState]; if (states) { var i; for (i = 0; i < states.length; i++) { var state = new Option(states[i], states[i]); stateList.options.add(state); } } } function ChangeCityList() { var stateList = document.getElementById("state"); var cityList = document.getElementById("city"); var selCity = stateList.options[stateList.selectedIndex].value; while (cityList.options.length) { cityList.remove(0); } var cities = cityAndStates[selCity]; if (cities) { var i; for (i = 0; i < cities.length; i++) { var city = new Option(cities[i], i); cityList.options.add(city); } } } 

 <select id="region" onchange="ChangeStateList()"> <option value="">-- Region --</option> <option value="ANY">ANY</option> <option value="North_DEL">North_DEL</option> <option value="North_HR">North_HR</option> <option value="South_TN">South_TN</option> <option value="South_KK">South_KK</option> </select> <select onchange="ChangeCityList()" id="state"></select> <select id="city"></select>