JavaScript實現(xiàn)省份城市的三級聯(lián)動

更新時間：2020年02月11日 10:06:09 作者：da_yu_hai_tang

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)省份城市的三級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)省份城市的三級聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 select{
  width: 80px;
  margin: 5px;
 }
 </style>
 <script>
 // 省份數(shù)組
 var provinceArr = ['上海', '江蘇', '河北'];
   // 城市數(shù)組
   var cityArr = [
   ['上海市'],
  ['蘇州市', '南京市', '揚州市'],
  ['石家莊', '秦皇島', '張家口']
 ];
   // 區(qū)域數(shù)組
   var countryArr = [
   [
    ['黃浦區(qū)', '靜安區(qū)', '長寧區(qū)', '浦東區(qū)']
   ],
   [
    ['虎丘區(qū)', '吳中區(qū)', '相城區(qū)', '姑蘇區(qū)', '吳江區(qū)'],
    ['玄武區(qū)', '秦淮區(qū)', '建鄴區(qū)', '鼓樓區(qū)', '浦口區(qū)'],
    ['邗江區(qū)', '廣陵區(qū)', '江都區(qū)']
   ],
   [
    ['長安區(qū)', '橋西區(qū)', '新華區(qū)', '井陘礦區(qū)'],
     ['海港區(qū)', '山海關區(qū)', '北戴河區(qū)', '撫寧區(qū)'],
     ['橋東區(qū)', '橋西區(qū)', '宣化區(qū)', '下花園區(qū)']
    ]
   ];
   window.onload = function(){
   var province = document.getElementById('province');
   var city = document.getElementById('city');
   var country = document.getElementById('country');
   createOption(province, provinceArr);
   province.onchange = function(){
    city.length = 0;
    createOption(city, cityArr[this.selectedIndex]);
    city.onchange();
   }
   city.onchange = function(){
    country.length = 0;
    createOption(country, countryArr[province.selectedIndex][this.selectedIndex]);
   }
   province.onchange();
   }
   function createOption(obj, data){
   for (var i = 0; i < data.length; i++) {
    var newOption = new Option(data[i], data[i]);
    obj.add(newOption, null);
   }
   }
 </script>
</head>
<body>
 省份<select name="" id="province"></select>
 城市<select name="" id="city"></select>
 區(qū)域<select name="" id="country"></select>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: