js地区联动数组。求指教

JavaScript024

js地区联动数组。求指教,第1张

<script type="text/javascript">       

       function pp() {

           var s = document.getElementById("s2").value

           var ah = new Array("安庆", "蚌埠", "巢湖", "池州", "滁州", "阜阳", "合肥", "淮北", "淮南", "黄山", "六安", "马鞍山", "宿州", "铜陵", "芜湖", "宣城", "亳州")

           var js = new Array("常州", "淮安", "连云港", "南京", "南通", "苏州", "宿迁", "泰州", "无锡", "徐州", "盐城", "扬州", "镇江")

           var sc = new Array("阿坝", "巴中", "成都", "达州", "德阳", "甘孜", "广安", "广元", "乐山", "凉山", "眉山", "绵阳", "南充", "内江", "攀枝花", "遂宁", "雅安", "宜宾", "资阳", "自贡", "泸州")

           if (s == "0") {

               for (var i = 0i <ah.lengthi++) {

                   document.getElementById("s3").options[i] = new Option(ah[i] + 1 + "日")

               }

           }

       }

          

   </script>

<div class="address">

       <span>地址:</span>

       <select id="s1">

           <option>中国</option>

       </select>

       <select id="s2" onchange="javascript:pp()">

           <option value="">省份、州</option>

           <option value="0">安徽</option>

           <option value="1">江苏</option>

           <option value="2">四川</option>

       </select>

       <select id="s3">

           <option>市、县</option>

       </select>

   </div>

源码里面要记得放省事等数据 要json的格式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>省市区三级联动</title>

</head>

<body>

<form>

<select id="province">

<option>请选择省份</option>

</select>

<select id="city">

<option>请选择城市</option>

</select>

<select id="district">

<option>请选择区域</option>

</select>

</form>

<script src="json.js"></script>

<script type="text/javascript">

var proData = [],

cityData = [],

distData = []

var proSelect = document.getElementById("province"),

citySelect = document.getElementById("city"),

districtSelect = document.getElementById("district")

var curPro = "",

curCity = ""

// 封装更新选择列表函数

function fillselect(select,list){

for (var i = select.length-1i >0 i--){

select.remove(i)

}

list.forEach(function(data){

var option = new Option(data.name, data.sheng)

option.dataset.di = data.di

select.add(option)

})

}

// 将数据按省、市、地区分别存储

dataJson.forEach(function(data){

if (data.level === 1){

proData.push(data)

}

if (data.level === 2){

cityData.push(data)

}

if (data.level === 3){

distData.push(data)

}

})

fillselect(proSelect,proData)

// 监听一级省份选择列表change事件,更新二级城市列表

proSelect.addEventListener("change",function(event){

var val = event.target.value

var list = []

cityData.forEach(function(d){

if (d.sheng === val) {

list.push(d)

}

})

fillselect(citySelect,list)

})

// 监听二级城市选择列表change事件,更新三级区域列表

citySelect.addEventListener("change",function(event){

var val = event.target.value

var curIndex = event.target.selectedIndex

curCity = event.target[curIndex].dataset.di

console.log(event.target,curCity)

var list = []

distData.forEach(function(d){

if (d.di === curCity &&d.sheng === val) {

list.push(d)

}

})

fillselect(districtSelect,list)

})

</script>

</body>

</html>

页面中获取值并判断的js如下:

<script type="text/javascript">

//这个函数是必须的,因为在area.js里每次更改地址时会调用此函数

function promptinfo()

{

var address = document.getElementById('address')

var s1 = document.getElementById('s1')

var s2 = document.getElementById('s2')

var town1 = document.getElementById('town1')