省市联动

(function() {  var data = [    {      name: ‘四川省‘,      citys: [        {          name: ‘成都市‘,          area: [‘成都1区‘, ‘成都2区‘, ‘成都3区‘],        },        {          name: ‘绵阳市‘,          area: [‘绵阳1区‘, ‘绵阳2区‘, ‘绵阳3区‘],        },        {          name: ‘广元市‘,          area: [‘广元1区‘, ‘广元2区‘, ‘广元3区‘],        },      ],    },    {      name: ‘广东省‘,      citys: [        {          name: ‘广州市‘,          area: [‘广州1区‘, ‘广州2区‘, ‘广州3区‘],        },        {          name: ‘东莞市‘,          area: [‘东莞1区‘, ‘东莞2区‘, ‘东莞3区‘],        },        {          name: ‘佛山市‘,          area: [‘佛山1区‘, ‘佛山2区‘, ‘佛山3区‘],        },      ],    },    {      name: ‘河南省‘,      citys: [        {          name: ‘洛阳市‘,          area: [‘洛阳1区‘, ‘洛阳2区‘, ‘洛阳3区‘],        },        {          name: ‘开封市‘,          area: [‘开封1区‘, ‘开封2区‘, ‘开封3区‘],        },        {          name: ‘郑州市‘,          area: [‘郑州1区‘, ‘郑州2区‘, ‘郑州3区‘],        },      ],    },  ];

  var provinceSelect = document.getElementById(‘province‘);  var citySelect = document.getElementById(‘city‘);  var areaSelect = document.getElementById(‘area‘);

  renderProvince();  renderCity(0);  renderArea(0, 0);

  provinceSelect.onchange = function() {    var provinceIndex = this.selectedIndex;    renderCity(provinceIndex);    renderArea(provinceIndex, 0);  };

  citySelect.onchange = function() {    var provinceIndex = provinceSelect.selectedIndex;    var cityIndex = this.selectedIndex;    renderArea(provinceIndex, cityIndex);  };

  function renderProvince() {    var str = ‘‘;    for(var i = 0; i < data.length; ++i) {      str += ‘<option>‘ + data[i].name + ‘</option>‘;    }    provinceSelect.innerHTML = str;  }

  function renderCity(provinceIndex) {    var cityData = data[provinceIndex].citys;    var str = ‘‘;    for(var i = 0; i < cityData.length; ++i) {      str += ‘<option>‘ + cityData[i].name + ‘</option>‘;    }    citySelect.innerHTML = str;  }

  function renderArea(provinceIndex, cityIndex) {    var areaData = data[provinceIndex].citys[cityIndex].area;    var str = ‘‘;    for(var i = 0; i < areaData.length; ++i) {      str += ‘<option>‘ + areaData[i] + ‘</option>‘    }    areaSelect.innerHTML = str;  }})();