首页 > 代码库 > 省市区三级联动和ajax模拟请求
省市区三级联动和ajax模拟请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.mamicode.com/JQuery/jquery-1.11.0.js"></script>
<script type="text/javascript">
$().ready(function() {
//点击加载省份名称
$("#btn").click(function() {
// alert("asasassa");
//省份改变之前先清空原先存在城市的option
$("[name = ‘sheng‘]").html("<option>==省份==</option>");
//省份改变之前先清空原先存在城市的option
$("[name = ‘shi‘]").html("<option>==城市==</option>");
//省份改变之前先清空原先存在区县的option
$("[name = ‘qu‘]").html("<option>==区县==</option>");
//请求数据
$.get("./json/sheng.json",
function(data) {
$(data).each(function(i) {
//动态加载option，并设置数据
var opSheng = "<option></option>";
$("[name=‘sheng‘]").append(opSheng);
$("[name=‘sheng‘] option").eq(i+1).text(data[i].name);
$("[name=‘sheng‘] option").eq(i+1).val(data[i].ProID);
});
}),
"json"
});
//省份改变时执行的方法
$("[name=‘sheng‘]").bind("change", function() {
//省份改变之前先清空原先存在城市的option
$("[name = ‘shi‘]").html("<option>==城市==</option>");
//省份改变之前先清空原先存在区县的option
$("[name = ‘qu‘]").html("<option>==区县==</option>");
//获得被点击省份名称
var shengID = $("[name = ‘sheng‘] option:selected").val();
//请求数据
$.get("./json/shi.json",
function(data) {
//作为option的下标号
var index = 1;
$(data).each(function(i) {
if (shengID == data[i].ProID) {
//动态加载option，并设置数据
var opShi = "<option></option>";
$("[name=‘shi‘]").append(opShi);
$("[name=‘shi‘] option").eq(index).text(data[i].name);
$("[name=‘shi‘] option").eq(index).val(data[i].CityID);
index++;
}
});
},
"json"
);
});
//城市改变时执行的方法
$("[name=‘shi‘]").bind("change", function() {
//获得被选择的城市名ID
var shiID = $("[name = ‘shi‘] option:selected").val();
//城市改变之前先清空原先存在区县的option
$("[name = ‘qu‘]").html("<option>==区县==</option>");
//请求数据
$.get("./json/qu.json",
function(data) {
//作为option的下标号码
var index = 1;
$(data).each(function(i) {
if (shiID == data[i].CityID) {
//添加加区的option
var opShi = "<option></option>";
$("[name=‘qu‘]").append(opShi);
$("[name=‘qu‘] option").eq(index).text(data[i].DisName);
$("[name=‘qu‘] option").eq(index).val(data[i].CityID);
index++;
}
});
},
"json"
);
});
});
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="http://www.mamicode.com/导入省名称" />
<br>
<select name="sheng" style="width: 150px;height: 200px;" multiple="multiple">
<!--<option>==省份==</option>-->
</select>
<select name="shi" style="width: 150px;height: 200px;" multiple="multiple">
<!--<option>==城市==</option>-->
</select>
<select name="qu" style="width: 150px;height: 200px;"multiple="multiple">
<!--<option>==区县==</option>-->
</select>
</body>
</html>
本文出自 “10917283” 博客，请务必保留此出处http://10927283.blog.51cto.com/10917283/1899579
省市区三级联动和ajax模拟请求