上面是整体实现后的效果，该例子实现的是省市县三级联动，省、市、县，每个下拉框数据都由一个数组组成。
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省的时候，市级的下拉框里面相应的显示的是对应省的市
// 利用select下拉框的change()方法，当下拉框值发生改变的时候，触发事件
$("#selProvince").change(function () {
$('#selCity').children().not(":eq(0)").remove(); //当选择其他省的时候，把之前市的内容清空掉， .not(":eq(0)") 不包括第一项 ，因为 --请选择 -- 这项不删除
iNum1 = $(this).children("option:selected").index(); //$(this).children("option:selected") 找到当前被选中的那个option的对象 $(this).children("option:selected").index() 索引 1，2，3 此处你可以打印看一下
var aaCity = aCity[iNum1 - 1]; //这里减去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]; //省市县之间的联系通过iNum1 iNum2两个参数对应起来了
for (var k = 0; k < aaCountry.length; k++) {
$('#selCountry').append("<option>" + aaCountry[k] + "</option>");
}
})
最后是完整代码
<select name="" id="selProvince">
<option value="">----请选择----</option>
</select>
<select name="" id="selCity">
<option value="">----请选择----</option>
</select>
<select name="" id="selCountry">
<option value="">----请选择----</option>
</select>
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>
