目标:
使用jQuery实现select下拉列表的三级联动
实现代码:
<div>
<select name="" id="selProvince">
<option value="">----请选择----</option>
</select>
<select name="" id="selCity">
<option value="">----请选择----</option>
</select>
<select name="" id="selCountry">
<option value="">----请选择----</option>
</select>
</div>
<!-- jQuery 3 -->
<script src="jquery/jquery.min.js"></script>
<script type="text/javascript">
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 () {
/* 1 加载省级选项 */
for(var i=0;i<aProvince.length;i++){
$('#selProvince').append('<option>'+aProvince[i]+'</option>');//给"省"加选项
}
/* 2 省与市级二级联动 */
$('#selProvince').change(function() {
//清空之前选项内容
$('#selCity').children().not(':eq(0)').remove();
$('#selCountry').children().not(':eq(0)').remove();
//找省对应的index
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>');
}
})
/* 3 市与县的联动 */
$('#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>