對於省市聯動的效果，在大部分的項目我們都會涉及的，開始剛工作的時候真心害怕這個東西。不知道如何下手去寫。後來在我們技術老大的帶領下用angular寫的省市聯動效果，真心不錯。但是有些項目我們不需要加載angular。今天我們就單獨拿出來用JS 看看如何實現省市聯動的效果吧。
第一步： 分析一下思路
常見的省市聯動下拉框，在選擇省份時，城市列表也會更隨改變。所謂聯動效果，是指出發父級的數據變化時，會影響到關聯性子級數據元素的變化。
我們用簡單的案例來一起看看：
var linkDatas = {
provinces:[
{
"code":"0",
"name":"請選擇"
},
{
"code":"1",
"name":"北京"
},
{
"code":"2",
"name":"天津"
},
{
"code":"3",
"name":"河北"
},
{
"code":"4",
"name":"湖北"
},
{
"code":"5",
"name":"廣東"
},
{
"code":"6",
"name":"其他"
}
],
citys:{
0:[
"請選擇"
],
1:[
"朝陽區",
"海淀區",
"東城區",
"西城區",
"房山區",
"其他"
],
2:[
"天津"
],
3:[
"滄州",
"石家莊",
"秦皇島",
"其他"
],
4:[
"武漢市",
"宜昌市",
"襄樊市",
"其他"
],
5:[
"廣州市",
"深圳市",
"汕頭市",
"佛山市",
"珠海市",
"其他"
],
6:[
"其他"
]
}
};第二步，根據數據動態生成option節點：
function addOptions(target,options){
var optionEle = null,
target = target,
option = options,
optionLen = options.length;
for(var i = 0;i < optionLen;i++){
optionEle = document.createElement('option');
optionEle.value = option[i].value;
optionEle.text = option[i].text;
target.options.add(optionEle);
}
}第三步，當省級的數據變更時，出發change事件：
pro.onchange = function(){
console.log(this);
var ct = city[this.value],
ctLen = ct.length,
ctBox = [];
c.innerHTML = "";
/*添加城市*/
for(var j = 0;j < ctLen;j++){
ctBox.push({
"text" : ct[j],
"value": ct[j]
});
}
addOptions(c,ctBox);
}HTML代碼：
<div class="content"> <h3>下拉框聯動效果</h3> <p>省份： <select name="provinces" id="provinces"> </select> </p> <p> 市： <select name="citys" id="citys"> </select> </p> </div>
JS 部分
var linkDatas = {
provinces:[
{
"code":"0",
"name":"請選擇"
},
{
"code":"1",
"name":"北京"
},
{
"code":"2",
"name":"天津"
},
{
"code":"3",
"name":"河北"
},
{
"code":"4",
"name":"湖北"
},
{
"code":"5",
"name":"廣東"
},
{
"code":"6",
"name":"其他"
}
],
citys:{
0:[
"請選擇"
],
1:[
"朝陽區",
"海淀區",
"東城區",
"西城區",
"房山區",
"其他"
],
2:[
"天津"
],
3:[
"滄州",
"石家莊",
"秦皇島",
"其他"
],
4:[
"武漢市",
"宜昌市",
"襄樊市",
"其他"
],
5:[
"廣州市",
"深圳市",
"汕頭市",
"佛山市",
"珠海市",
"其他"
],
6:[
"其他"
]
}
};
function addOptions(target,options){
var optionEle = null,
target = target,
option = options,
optionLen = options.length;
for(var i = 0;i < optionLen;i++){
optionEle = document.createElement('option');
optionEle.value = option[i].value;
optionEle.text = option[i].text;
target.options.add(optionEle);
}
}
function provincesCitysLink(pro,c){
var LD = linkDatas,
provinces = LD.provinces,
city = LD.citys,
initCity = city[0],
proBox = [];
/*添加省份*/
for(var i = 0;i < provinces.length;i++){
proBox.push({
"text" : provinces[i].name,
"value": provinces[i].code
})
}
addOptions(pro,proBox);
/*初始化城市*/
addOptions(c,[{
"text" : initCity,
"value": initCity
}]);
/*添加聯動事件*/
pro.onchange = function(){
console.log(this);
var ct = city[this.value],
ctLen = ct.length,
ctBox = [];
c.innerHTML = "";
/*添加城市*/
for(var j = 0;j < ctLen;j++){
ctBox.push({
"text" : ct[j],
"value": ct[j]
});
}
addOptions(c,ctBox);
}
}
var provinces = document.getElementById('provinces'),
citys = document.getElementById('citys');
provincesCitysLink(provinces,citys);今天就分享到這裏，昨晚沒我們家倆個寶貝折騰的困的不行了。祝大家學習愉快了！ 喜歡就動手分享去大家把！