尽可能每一步都做到详细,算是一个知识的回顾,有不足之处,希望大家多提意见
该例子实现的是省市县三级联动。
实现原理: 省、市、县,每个下拉框数据都由一个数组组成;光累文字肯定是不行的,直接上代码了。
先确定HTML部分:
<select name="" id="selProvince">
<option value="">----请选择----</option>
</select>
<select name="" id="selCity">
<option value="">----请选择----</option>
</select>
<select name="" id="selCountry">
<option value="">----请选择----</option>
</select>
关键部分(js)到了!!
先分别定义三个数组
var iNum1;
var iNum2;
var aProvince = ['湖北','江苏','安徽'];
var aCity =[['武汉','黄冈','荆门'],['南京','无锡','镇江'],['合肥','安庆','黄山']];
var aCountry =[[['武汉1','武汉2'],['黄冈1','黄冈2'],['荆门1','荆门2']],[['南京1','南京2'],['无锡1','无锡2'],['镇江1','镇江2']],[['合肥1','合肥2'],['安庆1','安庆2'],['黄山1','黄山2']]];
上面定义的两个变量,下面用到的时候再给大家解释。
aProvince表示的是省的部分
aCity表示的市部分,注意这个数组比较特别,数组里面又套了三个小的数组,每个小的数组与上面的省对应
aCountry表示的是县部分,这个数组更加特别,套了三层数组。
对于上面的这几个数组你可以这么理解,省A下面肯定对应了很多的市B,而每个市B下面肯定又对应了很多县C
第一步:遍历省级
通过js把数组里面的内容加载到页面上去:
遍历省级的数组,将每个内容插入下拉框内
$(function () {
for(var i=0;i<aProvince.length;i++){
$('#selProvince').append('<option>'+aProvince[i]+'</option>');
}
})
下过如下图所示
第二步 省与市级二级联动
我们要实现的是一个联动的效果,当选择A省的时候,市级的下拉框里面相应的显示的是对应省的市
$(function () {
for(var i=0;i<aProvince.length;i++){
$('#selProvince').append('<option>'+aProvince[i]+'</option>');
};
$('#selProvince').change(function () {
$('#selCity').children().not(':eq(0)').remove();
iNum1 = $(this).children('option:selected').index();
var aaCity = aCity[iNum1-1];
for(var j=0;j<aaCity.length;j++){
$('#selCity').append('<option>'+aaCity[j]+'</option>');
}
})
})
利用select下拉框的change()方法,当下拉款值发生改变的时候,触发事件
iNum1 = $(this).children('option:selected').index();
这一行代码表示的是,获取你所选取的省对应的位置,可以打印出来瞧瞧,
var aaCity = aCity[iNum1-1];
当你选某个省的时候,省与市之间通过什么联系呢?后面下拉框里面的市要与现在选的省相对应,怎么对应呢,通过iNum;这一行中 aCity[iNum-1],表示的是,譬如你选A省,aCity[iNum-1]数组表示的就是A省下面对应的市;iNum-1 这里减去1的意思是,因为在下拉框里面我们第一行有个---请选择----,要把这个去掉,才能对应上。然后遍历aaCity,把对应的事插入进去;
$('#selCity').children().not(':eq(0)').remove();
这一行的意思是,当选择其他省的时候,把之前市的内容清空掉,具体效果如下
第三步 市与县的联动
省与市联动实现后,接下来实现市与县的联动;当你选择某市的时候,对应的县会出现;
思路与上面省市联动一样;
$(function () {
for(var i=0;i<aProvince.length;i++){
$('#selProvince').append('<option>'+aProvince[i]+'</option>');
};
$('#selProvince').change(function () {
$('#selCity').children().not(':eq(0)').remove();
$('#selCountry').children().not(':eq(0)').remove();
iNum1 = $(this).children('option:selected').index();
var aaCity = aCity[iNum1-1];
for(var j=0;j<aaCity.length;j++){
$('#selCity').append('<option>'+aaCity[j]+'</option>');
}
});
$('#selCity').change(function () {
$('#selCountry').children().not(':eq(0)').remove();
iNum2 = $(this).children('option:selected').index();
var aaCountry = aCountry[iNum1-1][iNum2-1];
for(var k=0;k<aaCountry.length;k++){
$('#selCountry').append('<option>'+aaCountry[k]+'</option>');
}
})
})
var aaCountry = aCountry[iNum1-1][iNum2-1];
这行代码的意思
aCountry[iNum1-1][iNum2-1];
省市县之间的联系通过iNum1 iNum2两个参数对应起来了,效果如下
最后贴上所有的代码~
<script>
var iNum1;
var iNum2;
var aProvince = ['湖北','江苏','安徽'];
var aCity =[['武汉','黄冈','荆门'],['南京','无锡','镇江'],['合肥','安庆','黄山']];
var aCountry =[[['武汉1','武汉2'],['黄冈1','黄冈2'],['荆门1','荆门2']],[['南京1','南京2'],['无锡1','无锡2'],['镇江1','镇江2']],[['合肥1','合肥2'],['安庆1','安庆2'],['黄山1','黄山2']]];
$(function () {
for(var i=0;i<aProvince.length;i++){
$('#selProvince').append('<option>'+aProvince[i]+'</option>');
};
$('#selProvince').change(function () {
$('#selCity').children().not(':eq(0)').remove();
$('#selCountry').children().not(':eq(0)').remove();
iNum1 = $(this).children('option:selected').index();
var aaCity = aCity[iNum1-1];
for(var j=0;j<aaCity.length;j++){
$('#selCity').append('<option>'+aaCity[j]+'</option>');
}
});
$('#selCity').change(function () {
$('#selCountry').children().not(':eq(0)').remove();
iNum2 = $(this).children('option:selected').index();
var aaCountry = aCountry[iNum1-1][iNum2-1];
for(var k=0;k<aaCountry.length;k++){
$('#selCountry').append('<option>'+aaCountry[k]+'</option>');
}
})
})
</script>
</head>
<body>
<select name="" id="selProvince">
<option value="">----请选择----</option>
</select>
<select name="" id="selCity">
<option value="">----请选择----</option>
</select>
<select name="" id="selCountry">
<option value="">----请选择----</option>
</select>