<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>省市区三级联动</title>
<style type="text/css">
select{
width: 200px;
}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$.ajax({
type: "get",
url: "findProvince",
dataType: "json",
success: function (data) {
var obj = $("#province");
for (var i = 0; i < data.length; i++) {
var choose = "<option value='" + data[i].provinceCode + "'>" + data[i].name + "</option>";
obj.append(choose);
}
}
})
});
</script>
<script type="text/javascript">
$(function () {
$("#province").change(function () {
//alert($("#province").val());
// $("#area").html("<option>请选择</option>")
findCity();
findArea();
});
})
function findCity() {
$.ajax({
async:false,
type: "get",
url: "findCity?pCode=" + $("#province").val(),
dataType: "json",
success: function (data) {
$("#city option").remove();
var obj = $("#city");
for (var i = 0; i < data.length; i++) {
var choose = "<option value='" + data[i].cityCode + "'>" + data[i].name + "</option>";
obj.append(choose);
}
}
})
}
</script>
<script type="text/javascript">
$(function () {
$("#city").change(function () {
// alert($("#province").val());
findArea();
});
})
function findArea() {
$.ajax({
type: "get",
url: "findArea?cCode=" + $("#city").val(),
dataType: "json",
success: function (data) {
$("#area option").remove();
var obj = $("#area");
for (var i = 0; i < data.length; i++) {
var choose = "<option value='" + data[i].areaCode + "'>" + data[i].name + "</option>";
obj.append(choose);
}
}
})
}
</script>
<select id="province" name="province">
<option>请选择</option>
</select>省
<select id="city" name="city">
<option>请选择</option>
</select>市
<select id="area" name="area">
<option>请选择</option>
</select>区
<script>
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
