邓2018-05-12 08:49:02
<!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:55
找到原因了,是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",
type: "get",
## url : "region_action.php", // type=1表示查詢省份 data: {"parent_id": "1", "type": "1"}, dataType: "1"}, dataType: " json", success: function(data) { $("#provinces").html("<option value=''>請選擇省份> "); $.each(data, function(i, item) { // alert(item.region_id); $("#provinces") 。 } }); // 載入目前省所有城市 $("#provinces").change(function() { $ ("#region").empty(); $.ajax({ type: "get",## _ type =2表示查詢城市
data: {"parent_id": $(this).val(), "type": "2"},
dataTypeo: dataType
success: function(data) {
$("#citys").html("<option value=''>
## $("#countys").html("<option value=''>請選擇縣府</option>");# . i, item) {
if(i!="msg"){
$("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "<ion/option> # }else{
# $("#region").
});
}
# });
});
// 載入目前市所有縣
## $("#citys").change(function() {# $("#region").empty();## $.ajax({
type: "get",
reg type: "get",
##o. ", // 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>");
# se{ # $("#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 ="您選擇的位址錯誤!地址是:"+"<input value='" + value + "'>");
}else{
# $("#region").empty();## $("#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>