三级联动

时间  2019-12-05
标签 三级 联动 繁體版
原文   原文链接

html：html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>省市区联动</title>
</head>
<body>
  <select id="province"></select>
  <br>
  <select id="city"></select>
  <br>
  <select id="area"></select>
  <script src="./js/省市区联动.js"></script>
</body>
</html>

js部分：

(function() {  var data = [    {      name: '四川省',      city: [        {          name: '成都市',          area: ['成都市1区', '成都2区', '成都3区'],        },        {          name: '都江堰市',          area: ['都江堰市1区', '都江堰市2区', '都江堰市3区'],        },        {          name: '绵阳市',          area: ['绵阳市1区', '绵阳市2区', '绵阳市3区'],        },      ],    },    {      name: '广东省',      city: [        {          name: '广州市',          area: ['广州市1区', '广州市2区', '广州市3区'],        },        {          name: '深圳市',          area: ['深圳市1区', '深圳市2区', '深圳市3区'],        },      ],    },    {      name: '河南省',      city: [        {          name: '洛阳市',          area: ['洛阳市1区', '洛阳市2区', '洛阳市3区'],        },        {          name: '开封市',          area: ['开封市1区', '开封市2区', '开封市3区'],        },        {          name: '郑州市',          area: ['郑州市1区', '郑州市2区', '郑州市3区'],        },      ],    },  ];  var provinceSelectObj = document.getElementById('province');  var citySelectObj = document.getElementById('city');  var areaSelectObj = document.getElementById('area');  // 拼字符串  // var htmlText = '';  // // 遍历数组  // for(var i = 0; i < data.length; ++i) {  //   htmlText = htmlText + '<option>' + data[i].name + '</option>';  // }  // // console.log(htmlText);  // provinceSelectObj.innerHTML = htmlText;  for(var i = 0; i < data.length; ++i) {    var newOption = document.createElement('option');    newOption.innerHTML = data[i].name;    provinceSelectObj.appendChild(newOption);  }  provinceSelectObj.onchange = function() {    renderCity(provinceSelectObj.selectedIndex);    renderArea(provinceSelectObj.selectedIndex, 0);  };  citySelectObj.onchange = function() {    renderArea(provinceSelectObj.selectedIndex, citySelectObj.selectedIndex);  };  renderCity(0);  renderArea(0, 0);  function renderCity(provinceIndex) {    // 每次显示新城市以前，先清空以前的城市    citySelectObj.innerHTML = '';    var arr = data[provinceIndex].city;    for(var i = 0; i < arr.length; ++i) {      var newOption = document.createElement('option');      newOption.innerHTML = arr[i].name;      citySelectObj.appendChild(newOption);    }  }  function renderArea(provinceIndex, cityIndex) {    // 显示新的区以前，先把以前显示的区清空    areaSelectObj.innerHTML = '';    var arr = data[provinceIndex].city[cityIndex].area;    for(var i = 0; i < arr.length; ++i) {      var newOption = document.createElement('option');      newOption.innerHTML = arr[i];      areaSelectObj.appendChild(newOption);    }  }})();
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程