三级联动下拉列表怎么实现_JQuery 实现三级联动 041

<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 省 selCity 市 selCountry区
$('#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];
//alert(aaCity)for(var j=0;j<aaCity.length;j++){
//循环遍历 遍历完成在selCity 这里加入市级菜单
$('#selCity').append('<option>'+aaCity[j]+'</option>');
}
});
//selCity 级菜单的选择改变事件
$('#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 这里加入区级菜单
$('#selCountry').append('<option>'+aaCountry[k]+'</option>');
// $('#selCountry').children('option:selected[1]')
}
})
})
</script>

<select name="" id="selProvince">
<option value="">----请选择----</option>
</select>
<select name="" id="selCity">
<option value="">----请选择----</option>
</select>
<select name="" id="selCountry">
<option value="">----请选择----</option>
</select>