基于JS實現(xiàn)省市聯(lián)動效果代碼分享

更新時間：2016年06月06日 09:34:36 作者：NoobRun

這篇文章主要介紹了基于JS實現(xiàn)省市聯(lián)動效果代碼的相關(guān)資料,非常實用，在日常項目開發(fā)過程中經(jīng)常遇到此需求，下面小編給大家分享實現(xiàn)代碼，需要的朋友可以參考下

在日常項目開發(fā)階段經(jīng)常見到下拉框二級聯(lián)動效果，尤其是涉及地區(qū)、品種等有多級選項時。比如說：常見的省市聯(lián)動下拉框，在選擇省份時，城市列表也會更隨改變。

思路：

1，所謂聯(lián)動效果，是指出發(fā)父級的數(shù)據(jù)變化時，會影響到關(guān)聯(lián)性子級數(shù)據(jù)元素的變化。

下面是造的省市的數(shù)據(jù)：

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:[
"朝陽區(qū)",
"海淀區(qū)",
"東城區(qū)",
"西城區(qū)",
"房山區(qū)",
"其他"
],
2:[
"天津"
],
3:[
"滄州",
"石家莊",
"秦皇島",
"其他"
],
4:[
"武漢市",
"宜昌市",
"襄樊市",
"其他"
],
5:[
"廣州市",
"深圳市",
"汕頭市",
"佛山市",
"珠海市",
"其他"
],
6:[
"其他"
]
}
};

2，根據(jù)數(shù)據(jù)動態(tài)生成option節(jié)點：

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);
}
}

3，根據(jù)上述省市數(shù)據(jù)，其中code代表“省級”指向“城市”的標(biāo)識符，當(dāng)省級的數(shù)據(jù)變更時，出發(fā)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>下拉框聯(lián)動效果</h3>
<p>省份：
<select name="provinces" id="provinces">
</select>
</p>
<p>
市：
<select name="citys" id="citys">
</select>
</p>
</div>

全部JavaScript代碼：

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:[
"朝陽區(qū)",
"海淀區(qū)",
"東城區(qū)",
"西城區(qū)",
"房山區(qū)",
"其他"
],
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
}]);
/*添加聯(lián)動事件*/
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);

您可能感興趣的文章: