三級聯動

時間  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教程