扫码关注官方订阅号
84669人学习
65727人学习
82984人学习
467778人学习
498837人学习
471966人学习
256484人学习
152542人学习
224170人学习
139536人学习
81804人学习
85022人学习
11944人学习
20001人学习
60816人学习
5487人学习
15007人学习
2150人学习
6980人学习
194925人学习
359900人学习
1142人学习
19058人学习
3206人学习
180550人学习
48569人学习
17603人学习
40936人学习
1049人学习
750人学习
32909人学习
这是正常选择,如果我抽风会这样
哥们,有空能不能把你这部分的完整代码给我看一下,我现在就是死活弄不出来这效果,看了很久也没看出哪儿有问题,多谢了
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title></title>
<style type="text/css">
#addr{width=60%;border-collapse:collpase;border:solid 1px Black;}
#addr td,#addr th{
border:1px solid Black;
padding:3px 7px 2px 7px;
}
</style>
刚刚的回答少了些开头的代码,现在补上。
找到原因了,是region_action.php 当传入空值时会放回一个flag=false msg="查询类型有误"这个json回来
我将flag去掉了只返回msg 然后在region.html 里面遍历json时候判断msg的值
改动后region.html源码如下:
<script src="./jquery-2.2.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// 加载所有的省份
$.ajax({
type: "get",
url: "region_action.php", // type=1表示查询省份
data: {"parent_id": "1", "type": "1"},
dataType: "json",
success: function(data) {
$("#provinces").html("<option value=''>请选择省份</option>");
$.each(data, function(i, item) {
// alert(item.region_id);
$("#provinces").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
});
// 加载当前省所有市
$("#provinces").change(function() {
$("#region").empty();
url: "region_action.php", // type =2表示查询市
data: {"parent_id": $(this).val(), "type": "2"},
$("#citys").html("<option value=''>请选择市</option>");
$("#countys").html("<option value=''>请选择县</option>");
if(i!="msg"){
$("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
}else{
$("#region").append(item);
// 加载当前市所有县
$("#citys").change(function() {
url: "region_action.php", // type =3表示查询县
data: {"parent_id": $(this).val(), "type": "3"},
$("#countys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
// 显示地址
$("#countys").change(function() {
if($("#provinces").val()!="" && $("#citys").val()!="" && $("#countys").val()!=""){
var value = $("#provinces").find("option:selected").text()
+ $("#citys").find("option:selected").text()
+ $("#countys").find("option:selected").text();
var value ="您选择的地址有误!";
if($("#region")==""){
$("#region").append("选择的地址是:"+"<input value='" + value + "'>");
</script>
</head>
<body>
<h1 align="left">省市县三级联动</h1>
<table id="addr">
<tr bgcolor="skybule">
<th>省份</th>
<th>市</th>
<th>县</th>
</tr>
<tr>
<th>
<select id="provinces">
<option value="">请选择省份</option>
</select>
</th>
<select id="citys">
<option value="">请选择市</option>
<select id="countys">
<option value="">请选择县</option>
</table>
<h4 align="left">
<span id="region"></span>
</h4>
</body>
</html>
有源码吗?
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
精品班
技术支持
技术咨询
学习群
会员优惠
返回顶部
哥们,有空能不能把你这部分的完整代码给我看一下,我现在就是死活弄不出来这效果,看了很久也没看出哪儿有问题,多谢了
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title></title>
<style type="text/css">
#addr{width=60%;border-collapse:collpase;border:solid 1px Black;}
#addr td,#addr th{
border:1px solid Black;
padding:3px 7px 2px 7px;
}
</style>
刚刚的回答少了些开头的代码,现在补上。
找到原因了,是region_action.php 当传入空值时会放回一个flag=false msg="查询类型有误"这个json回来
我将flag去掉了只返回msg 然后在region.html 里面遍历json时候判断msg的值
改动后region.html源码如下:
</style>
<script src="./jquery-2.2.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// 加载所有的省份
$.ajax({
type: "get",
url: "region_action.php", // type=1表示查询省份
data: {"parent_id": "1", "type": "1"},
dataType: "json",
success: function(data) {
$("#provinces").html("<option value=''>请选择省份</option>");
$.each(data, function(i, item) {
// alert(item.region_id);
$("#provinces").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
});
}
});
// 加载当前省所有市
$("#provinces").change(function() {
$("#region").empty();
$.ajax({
type: "get",
url: "region_action.php", // type =2表示查询市
data: {"parent_id": $(this).val(), "type": "2"},
dataType: "json",
success: function(data) {
$("#citys").html("<option value=''>请选择市</option>");
$("#countys").html("<option value=''>请选择县</option>");
$.each(data, function(i, item) {
if(i!="msg"){
$("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
}else{
$("#region").append(item);
}
});
}
});
});
// 加载当前市所有县
$("#citys").change(function() {
$("#region").empty();
$.ajax({
type: "get",
url: "region_action.php", // type =3表示查询县
data: {"parent_id": $(this).val(), "type": "3"},
dataType: "json",
success: function(data) {
$("#countys").html("<option value=''>请选择县</option>");
$.each(data, function(i, item) {
if(i!="msg"){
$("#countys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
}else{
$("#region").append(item);
}
});
}
});
});
// 显示地址
$("#countys").change(function() {
$("#region").empty();
if($("#provinces").val()!="" && $("#citys").val()!="" && $("#countys").val()!=""){
var value = $("#provinces").find("option:selected").text()
+ $("#citys").find("option:selected").text()
+ $("#countys").find("option:selected").text();
}else{
var value ="您选择的地址有误!";
}
if($("#region")==""){
$("#region").append("选择的地址是:"+"<input value='" + value + "'>");
}else{
$("#region").empty();
$("#region").append("选择的地址是:"+"<input value='" + value + "'>");
}
});
});
</script>
</head>
<body>
<h1 align="left">省市县三级联动</h1>
<table id="addr">
<tr bgcolor="skybule">
<th>省份</th>
<th>市</th>
<th>县</th>
</tr>
<tr>
<th>
<select id="provinces">
<option value="">请选择省份</option>
</select>
</th>
<th>
<select id="citys">
<option value="">请选择市</option>
</select>
</th>
<th>
<select id="countys">
<option value="">请选择县</option>
</select>
</th>
</tr>
</table>
<h4 align="left">
<span id="region"></span>
</h4>
</body>
</html>
有源码吗?