省市区三级联动和ajax模拟请求

2025-01-30 技术教程

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="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="导入省名称" />
<br>

<select name="sheng" multiple="multiple">

</select>

<select name="shi" multiple="multiple">

</select>

<select name="qu" multiple="multiple">

</select>
</body>

</html>