java 省市联动_2.省市区，三级联动（注释详解）。

1

2

3

4

5

6 请选择所在的城市

7

8

9 请选择所在的县区

10

11

12

13 //--------获取所有的select列表，并赋值给变量-----------

14 var select = document.getElementsByTagName('select');15 var sel_1 = select[0];16 var sel_2 = select[1];17 var sel_3 = select[2];18 //--------新声明一个Ajax对象-----------

19 var oAjax = newXMLHttpRequest();20 //--------第一个select(省级)内容-------

21 functionchange() {22 oAjax.open('GET', 'json/city.json', true);23 oAjax.send();24 oAjax.onreadystatechange = function() {25 if (oAjax.readyState == 4 && oAjax.status == 200) {26 var c =JSON.parse(oAjax.responseText);27 //-----option_1是生成select(省级)内的HTML内容--------

28 var option_1 = '请选择所在的省市';29 //-----c.city.length是JSON文件下最外层city数组的长度，及它内所有{}对象的个数---------

30 for (var i = 0; i < c.city.length; i++) {31 //-----c.city[i].name是JSON文件下最外层city数组，的下标值为i的对象里，为name属性所对应的值----------

32 option_1 += '' + c.city[i].name + '';33 }34 sel_1.innerHTML =option_1;35 }36 }37 }38 //--------第一个select(省级)触发onchange事件部分----------

39 functionsel_one() {40 //-------将第一个select(省级)内的"请选择所在的省市"隐藏掉--------

41 //-------sel_1.firstElementChild为第一个select(省级)内的第一个子元素节点---->"请选择所在的省市"-------

42 sel_1.firstElementChild.style.display = 'none';43 //-------将第三个select(县区)的内容重置为"请选择所在的县区"----------

44 sel_3.innerHTML = '请选择所在的县区';45 //-------sel_1.selectedIndex为第一个select(省级)当前选中内容所在的索引值-----------

46 //-------sel_2.selectedIndex为第二个select(城市)当前选中内容所在的索引值-----------

47 //-------sel_1.selectedIndex - 1；减去 1 是因为第一个select(省级)的第一个内容为"请选择所在的省市"---------

48 //-------导致所有对应的省市内容的索引值均变大 1 --------------------

49 var index = sel_1.selectedIndex - 1;50 var index2 =sel_2.selectedIndex;51 oAjax.open('GET', 'json/city.json', true);52 oAjax.send();53 oAjax.onreadystatechange = function() {54 if (oAjax.readyState == 4 && oAjax.status == 200) {55 var c =JSON.parse(oAjax.responseText);56 //------判断 当第一个select(省级)当前的内容 与 JSON文件下最外层city数组，下标为index的对象里，为name属性所对应的值 相等时----------

57 if (sel_1.value ==c.city[index].name) {58 //-----option_2是生成select(城市)内的HTML内容--------

59 var option_2 = '';60 for (var i = 0; i < c.city[index].city.length; i++) {61 //------c.city[index].city[i].name是JSON文件下最外层city数组，的下标值为index的对象里，为city的数组，的下标为i的对象里，为name属性所对应的值----------

62 option_2 += '' + c.city[index].city[i].name + '';63 }64 sel_2.innerHTML =option_2;65 }66 //--------81~92行代码，是为了方便三级联动-------------------------

67 //------判断 当第二个select(城市)当前的内容 与 JSON文件下最外层city数组，下标是index的对象里，为city的数组，的下标为index2的对象里，为name属性所对应的值 相等时----------

68 if (sel_2.value ==c.city[index].city[index2].name) {69 //-----option_3是生成select(县区)内的HTML内容--------

70 var option_3 = '';71 for (var i = 0; i < c.city[index].city[index2].area.length; i++) {72 //------c.city[index].city[index2].area[i]是JSON文件下最外层city数组，的下标值为index的对象里，为city的数组，的下标为index2的对象里，为area数组，的下标为i，所对应的值----------

73 option_3 += '' + c.city[index].city[index2].area[i] + '';74 }75 sel_3.innerHTML =option_3;76 }77 //-----------------------------------------------------------------------------------------------

78 }79 }80 }81 //--------第二个select(省级)触发onchange事件部分----------

82 functionsel_two() {83 //-------sel_1.selectedIndex为第一个select(省级)当前选中内容所在的索引值-----------

84 //-------sel_2.selectedIndex为第二个select(城市)当前选中内容所在的索引值-----------

85 //-------sel_1.selectedIndex - 1；减去 1 是因为第一个select(省级)的第一个内容为"请选择所在的省市"---------

86 //-------导致所有对应的省市内容的索引值均变大 1 --------------------

87 var index = sel_1.selectedIndex - 1;88 var index2 =sel_2.selectedIndex;89 oAjax.open('GET', 'json/city.json', true);90 oAjax.send();91 oAjax.onreadystatechange = function() {92 if (oAjax.readyState == 4 && oAjax.status == 200) {93 var c =JSON.parse(oAjax.responseText);94 //------判断 当第二个select(城市)当前的内容 与 JSON文件下最外层city数组，下标是index的对象里，为city的数组，的下标为index2的对象里，为name属性所对应的值 相等时----------

95 if (sel_2.value ==c.city[index].city[index2].name) {96 //-----option_3是生成select(县区)内的HTML内容--------

97 var option_3 = '';98 for (var i = 0; i < c.city[index].city[index2].area.length; i++) {99 //------c.city[index].city[index2].area[i]是JSON文件下最外层city数组，的下标值为index的对象里，为city的数组，的下标为index2的对象里，为area数组，的下标为i，所对应的值----------

100 option_3 += '' + c.city[index].city[index2].area[i] + '';101 }102 sel_3.innerHTML =option_3;103 }104 }105 }106 }107

108

109