[三级联动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>
```
