距开课0天0时0分-10086247秒
邓2018-05-11 16:45:28 0 6 850
[PHP讨论组]源自课程章节：代码展示举报回复话题 ↕
这是正常选择，如果我抽风会这样
4
0
分享
╰倒轉流年丶祇爲一眼紅顔 2018-06-10 23:41:004楼
哥们，有空能不能把你这部分的完整代码给我看一下，我现在就是死活弄不出来这效果，看了很久也没看出哪儿有问题，多谢了
赞 +0添加回复
好的，你加我QQ908901178，我发给你
邓 2018-05-12 08:49:023楼
<!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>
刚刚的回答少了些开头的代码，现在补上。
邓 2018-05-12 08:46:552楼
找到原因了，是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>
sky 2018-05-11 17:16:411楼
有源码吗?
有明天上传，就该动了教学里面的一个文件
源码如下： <!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> <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) { $("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>"); }); } }); }); // 加载当前市所有县 $("#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) { $("#countys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>"); }); } }); }); // 显示地址 $("#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>
╰倒轉流年丶祇爲一眼紅顔 2018-06-10 23:41:004楼
哥们，有空能不能把你这部分的完整代码给我看一下，我现在就是死活弄不出来这效果，看了很久也没看出哪儿有问题，多谢了
赞 +0添加回复
邓 2018-05-12 08:49:023楼
<!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>
刚刚的回答少了些开头的代码，现在补上。
赞 +0添加回复
邓 2018-05-12 08:46:552楼
找到原因了，是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>
赞 +0添加回复
sky 2018-05-11 17:16:411楼
有源码吗?
赞 +0添加回复