DIV CSS 佈局教程網

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

思路：

1，所謂聯動效果，是指出發父級的數據變化時，會影響到關聯性子級數據元素的變化。

下面是造的省市的數據：

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:[
"其他"
]
}
};

2，根據數據動態生成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);
}
}

3，根據上述省市數據，其中code代表“省級”指向“城市”的標識符，當省級的數據變更時，出發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>

全部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:[
"朝陽區",
"海澱區",
"東城區",
"西城區",
"房山區",
"其他"
],
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);