标签:meta cte 第一个 utf-8 name 省份 app java pen
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>省市联动</title>
</head>
<body>
  <select id="province"></select>
  <select id="city"></select>
  <script src="./js/省市联动.js"></script>
</body>
</html>
(function() {
  var data = [
    {
      name: ‘四川省‘,
      citys: [‘成都市‘, ‘绵阳市‘, ‘南充市‘]
    },
    {
      name: ‘广东省‘,
      citys: [‘广州市‘, ‘深圳市‘, ‘东莞市‘]
    },
    {
      name: ‘河南省‘,
      citys: [‘郑州市‘, ‘洛阳市‘]
    },
    {
      name: ‘台湾省‘,
      citys: [‘郑州市‘, ‘洛阳市‘]
    }
  ];
  var provinceSelect = document.getElementById(‘province‘);
  var citySelect = document.getElementById(‘city‘);
  // 把省份select里面的内容显示出来
  for(var i = 0; i < data.length; i++) {
    // 省份的名称 data[i].name
    var option = document.createElement(‘option‘);
    option.innerHTML = data[i].name;
    // option.onclick = function() {
    //   showCitys(this.index);
    //   // console.log(123);
    // };
    provinceSelect.appendChild(option);
  }
  provinceSelect.onchange = function() {
    showCitys(provinceSelect.selectedIndex);
  };
  // 在citySelect中,应该默认显示第一个省份的城市
  showCitys(0);
  // 显示城市select里面的内容
  function showCitys(provinceIndex) {
    // 清空citySelect里面的内容
    citySelect.innerHTML = ‘‘;
    for(var i = 0; i < data[provinceIndex].citys.length; i++) {
      var option = document.createElement(‘option‘);
      option.innerHTML = data[provinceIndex].citys[i];
      citySelect.appendChild(option);
    }
  }
  
  // showCitys(1);
})();
标签:meta cte 第一个 utf-8 name 省份 app java pen
原文地址:http://www.cnblogs.com/xuyang1995/p/6036954.html