1 <body onload="change()"> 2 <form> 3 <select onchange="sel_one()"> 4 </select> 5 <select onchange="sel_two()"> 6 <option>请选择所在的城市</option> 7 </select> 8 <select> 9 <option>请选择所在的县区</option> 10 </select> 11 </form> 12 <script> 13 var select = document.getElementsByTagName('select'); 14 var sel_1 = select[0]; 15 var sel_2 = select[1]; 16 var sel_3 = select[2]; 17 var oAjax = new XMLHttpRequest(); 18 var c = ''; 19 function change() { 20 oAjax.open('GET', 'json/city.json', true); 21 oAjax.send(); 22 oAjax.onreadystatechange = function () { 23 if (oAjax.readyState == 4 && oAjax.status == 200) { 24 c = JSON.parse(oAjax.responseText); 25 var option_1 = '<option>请选择所在的省市</option>'; 26 for (var i = 0; i < c.city.length; i++) { 27 option_1 += '<option>' + c.city[i].name + '</option>'; 28 } 29 sel_1.innerHTML = option_1; 30 } 31 } 32 } 33 function sel_one() { 34 sel_1.firstElementChild.style.display = 'none'; 35 sel_3.innerHTML = '<option>请选择所在的县区</option>'; 36 var index = sel_1.selectedIndex - 1; 37 if (sel_1.value == c.city[index].name) { 38 var option_2 = ''; 39 for (var i = 0; i < c.city[index].city.length; i++) { 40 option_2 += '<option>' + c.city[index].city[i].name + '</option>'; 41 } 42 sel_2.innerHTML = option_2; 43 } 44 sel_two(); 45 } 46 function sel_two() { 47 var index = sel_1.selectedIndex - 1; 48 var index2 = sel_2.selectedIndex; 49 if (sel_2.value == c.city[index].city[index2].name) { 50 var option_3 = '' 51 for (var i = 0; i < c.city[index].city[index2].area.length; i++) { 52 option_3 += '<option>' + c.city[index].city[index2].area[i] + '</option>'; 53 } 54 sel_3.innerHTML = option_3; 55 } 56 } 57 </script> 58 </body>