[三級聯動sql文件](https://files-cdn.cnblogs.com/files/zxj95121/%E7%9C%81%E5%B8%82%E5%8E%BFsql.zip)
本文實現三級聯動的邏輯為：
1.首先根據id搜索所有的省；
2.根據省id變化查找到相應的城市pid，選擇所有的城市。
3.再根據城市id變化查找到相應的鄉pid，選擇所有的鄉。
- 當選擇器發生變化時使用`$("select change(function(){})")`進行操作。
- 每次province發生變化，需要把city和contry選擇器的所有內容清空后再把新的內容添加進去。使用`$("select").prop("length",1)`進行長度控制。city發生變化也需要進行處理。
- 使用`$.each(list,function(i,e){})`對請求返回數據進行遍歷。
- 使用`append`把數據添加到相應的`option`標簽中
>實現具體代碼：
```
<body>
<select name="province" id="province">
<option id='0'>--請選擇省--</option>
<c:forEach items="${provinceList }" var="province">
<option class="province" id="${province.id }">
${province.name }</option>
</c:forEach>
</select>
<select name="city" id="city">
<option id='00'>--請選擇市--</option>
</select>
<select name="country" id="country">
<option id='000'>--請選擇鄉--</option>
</select>
<script src="${Path}/static/js/jquery-1.9.1.min.js"></script>
<script>
$(function() {
$("#province").change(
function() {
var id = $("#province option:selected").prop("id")
$("#city").prop("length", 1);
$("#country").prop("length", 1);
if (id != "0") {
var url = "${Path}/getAreaByPid";
var data = {
"pid" : id
}
$.get(url, data, function(e) {
var areaList = e.data.list
$.each(areaList, function(i, e) {
$("#city").append(
"<option id="+e.id+" class='city'>"
+ e.name + "</option>")
})
})
}
})
})
$(function() {
$("#city").change(
function() {
var id = $("#city option:selected").prop("id")
$("#country").prop("length", 1);
if (id != "00") {
var url = "${Path}/getAreaByPid";
var data = {
"pid" : id
}
$.get(url, data, function(e) {
var areaList = e.data.list
$.each(areaList, function(i, e) {
$("#country").append(
"<option id="+e.id+" class='country'>"
+ e.name + "</option>")
})
})
}
})
})
</script>
</body>
```
