<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三级联动</title>
</head>
<body>
<div>
<select id="province">
<option value="">--请选择--</option>
</select>
<select id="city">
<option value="">--请选择--</option>
</select>
<select id="county">
<option value="">--请选择--</option>
</select>
</div>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
function initCity(){
$("#city").html('<option value="">--请选择--</option>');
}
function initCounty(){
$("#county").html('<option value="">--请选择--</option>');
}
var db = {
广东: {
珠海市: "珠海县1,珠海县2,珠海县3",
深圳市: "深圳县1,深圳,深圳县3",
广州市:"广州县1,广州县2,广州县3",
},
广西: {
南宁市: "南宁县1,南宁县2,南宁县3",
百色市: "百色县1,百色县2,百色县3",
桂林市: "桂林县1,桂林县2,桂林县3",
},
江西: {
市1: "县1,县2,县3",
市2: "县1,县2,县3",
市3: "县1,县2,县3",
}
};
$.each(db , function(province){
$("#province").append("<option>" + province + "</option>")
})
//一级变动
$("#province").on("change",function(){
initCity();
initCounty()
$.each(db, function(provice,val) {
if($("#province :selected").val() == provice){
$.each(val,function(city,counties){
$("#city").append("<option>" + city + "</option>");
});
//二级变动
$("#city").on("change",function(){
initCounty();
$.each(val , function(city,counties){
if($("#city :selected").val() == city){
var countArr = counties.split(",");
$.each(countArr , function(i,county){
$("#county").append("<option>" + county + "</option>");
});
}
})
})
}
});
})
})
</script>
</body>
</html>
