<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>省市区三级联动(jQuery+Json)</title>
<script type="text/javascript" src="http://img.pccoo.cn/js/jquery.js"></script>
<script type="text/javascript" src="china_area.js"></script>
<script type="text/javascript">
$(function() {
alert($(cityJson)[2].city)
$.each(provinceJson, function(k, p) {
var option = "<option value='" + p.id + "'>" + p.province + "</option>";
$("#selProvince").append(option);
});
$("#selProvince").change(function() {
var selValue = $(this).val();
$("#selCity option:gt(0)").remove();
$("#selDistrict option:gt(0)").remove();
$.each(cityJson, function(k, p) {
// 直辖市处理.|| p.parent == selValue，直辖市为当前自己
if (p.id == selValue || p.parent == selValue) {
var option = "<option value='" + p.id + "'>" + p.city + "</option>";
$("#selCity").append(option);
}
});
});
$("#selCity").change(function() {
var selValue = $(this).val();
$("#selDistrict option:gt(0)").remove();
$.each(countyJson, function(k, p) {
if (p.parent == selValue) {
var option = "<option value='" + p.id + "'>" + p.county + "</option>";
$("#selDistrict").append(option);
}
});
});
});
/*三级联动数据回显----------------------需要回显的页面加上以下即可---------------------------
jsp: <input type="hidden" value="${info.a_province}" id="t_a_province"/>
<input type="hidden" value="${info.a_city}" id="t_a_city"/>
<input type="hidden" value="${info.a_area}" id="t_a_area"/>
javascript: $("#t_a_province").val();
$("#t_a_city").val();
$("#t_a_area").val();
*/
//以上传值-----------------------------------------------------------------------------------
/*************************数据库存储的是键*/
$(function() {
//1，回显select省份
$("#selProvince option").each(function() {
var val = $(this).val();
if(val == 703){ //---request域对象中的省份参数
$(this).attr("selected", true);
}
});
//获取省份的val值
selValue = $("#selProvince option:selected").val();
//2，加载省份下的城市
$.each(cityJson, function(k, p) {
// 直辖市处理.|| p.parent == selValue，直辖市为当前自己
if (p.id == selValue || p.parent == selValue) {
var option = "<option value='" + p.id + "'>" + p.city + "</option>";
$("#selCity").append(option);
}
});
//回显select城市
$("#selCity option").each(function() {
var val = $(this).val();
if(val == 853){ //---request域对象中的城市参数
$(this).attr("selected", true);
}
});
//获取城市的val值
selValue = $("#selCity option:selected").val();
//3，加载城市下的地区
$.each(countyJson, function(k, p) {
if (p.parent == selValue) {
var option = "<option value='" + p.id + "'>" + p.county + "</option>";
$("#selDistrict").append(option);
}
});
//回显select地区
$("#selDistrict option").each(function() {
var val = $(this).val();
if(val == 856){ //---request域对象中的地区参数
$(this).attr("selected", true);
}
});
});
/***************************数据库存储的是字符：键
//---------数据回显----------
$(function() {
//1，回显select省份
$("#selProvince option").each(function() {
var val = $(this).text();
if(val == $("#t_a_province").val()){ //---request域对象中的省份参数
$(this).attr("selected", true);
}
});
//获取省份的val值
selValue = $("#selProvince option:selected").val();
//2，加载省份下的城市
$.each(cityJson, function(k, p) {
// 直辖市处理.|| p.parent == selValue，直辖市为当前自己
if (p.id == selValue || p.parent == selValue) {
var option = "<option value='" + p.id + "'>" + p.city + "</option>";
$("#selCity").append(option);
}
});
//回显select城市
$("#selCity option").each(function() {
var val = $(this).text();
if(val == $("#t_a_city").val()){ //---request域对象中的城市参数
$(this).attr("selected", true);
}
});
//获取城市的val值
selValue = $("#selCity option:selected").val();
//3，加载城市下的地区
$.each(countyJson, function(k, p) {
if (p.parent == selValue) {
var option = "<option value='" + p.id + "'>" + p.county + "</option>";
$("#selDistrict").append(option);
}
});
//回显select地区
$("#selDistrict option").each(function() {
var val = $(this).text();
if(val == $("#t_a_area").val()){ //---request域对象中的地区参数
$(this).attr("selected", true);
}
});
});
*/
</script>
</head>
<body>
<select id="selProvince">
<option value="0">--请选择省份--</option>
</select>
<select id="selCity">
<option value="0">--请选择城市--</option>
</select>
<select id="selDistrict">
<option value="0">--请选择区/县--</option>
</select>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-2911.html
