<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--jQuery包注意要用一样的,试过2.0的发现.change不能用-->
<script src="jquery-1.10.2.min.js"></script>
<script>
var iNum;
var iNum1;
//存放省份
var aProvince=["河北省","山西省","湖北省"];
//存放市
var aCity=[["石家庄市","张家口市","承德市"],["太原市","大同市","阳泉市"],["武汉市","孝感市","宜昌市"]];
//存放县
var aCountry=[[["无极县","赵县"],["尚义县","阳原县"],["平泉县","隆化县"]],[["抚宁县","卢龙县"],["清徐县","阳曲县"],["山阴县","应县"]],[["左云县","阳高县"],["孟县","平定县"],["武昌区","洪山区"]]];
$(function(){//当页面加载时在省份菜单下加载省份数组里的内容
for(var i=0;i<aProvince.length;i++){
$("#selProvince").append("<option>"+aProvince[i]+"</option>")
}
$("#selProvince").change(function(){//当省份菜单改变时1-移除除了“请选择”之外的其他项2-得到省份菜单选择项的下标
//3-根据得到的下标将对应省份的城市存入数组4-将得到的城市加载在城市菜单下
$("#selCity").children().not(":eq(0)").remove();
$("#selCountry").children().not(":eq(0)").remove();
iNum=$(this).children("option:selected").index();
var aaCity=aCity[iNum-1];
for(var i=0;i<aaCity.length;i++){
$("#selCity").append("<option>"+aaCity[i]+"</option>")
}
});
$("#selCity").change(function(){//当城市菜单改变时1-移除除了“请选择”之外的其它选项2-得到省份菜单选择项的下标和城市菜单选择项的下标
//3-根据得到的下标将对应县城存入数组4-将得到的县加载在县菜单下
$("#selCountry").children().not(":eq(0)").remove();
iNum1=$(this).children("option:selected").index();
var aaCountry=aCountry[iNum-1][iNum1-1];
for(var i=0;i<aaCountry.length;i++){
$("#selCountry").append("<option>"+aaCountry[i]+"</option>")
}
});
});
</script>
</head>
<body>
<select id="selProvince">
<option>---请选择---</option>
</select>
<select id="selCity">
<option>---请选择---</option>
</select>
<select id="selCountry">
<option>---请选择---</option>
</select>
</body>
</html>
jQuery+三级联动菜单
最新推荐文章于 2022-04-01 09:34:47 发布