省市联动

标签：

(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;
  }
})();

省市联动

标签：

原文地址：http://www.cnblogs.com/wangchen623/p/5701697.html