Wenn ich das erste Element auswähle, werden zwei undefinierte Elemente angezeigt
邓
2018-05-11 16:45:28
0
6
1674

正确.png

Das ist eine normale Wahl, das passiert, wenn ich Krämpfe habe

错误.png

邓

Antworte allen(4)
╰倒轉流年丶祇爲一眼紅顔

哥们,有空能不能把你这部分的完整代码给我看一下,我现在就是死活弄不出来这效果,看了很久也没看出哪儿有问题,多谢了

  • Antwort 好的,你加我QQ908901178,我发给你
    Autor 2018-06-11 08:02:39
邓

<!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>


sky

有源码吗?

  • Antwort 有明天上传,就该动了教学里面的一个文件
    Autor 2018-05-11 17:22:02
  • Antwort 源码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html&quot; charset=&quot;UTF-8&quot;&gt; &lt;title&gt;&lt;/title&gt; &lt;style type=&quot;text/css&quot;&gt; #addr{width=60%;border-collapse:collpase;border:solid 1px Black;} #addr td,#addr th{ border:1px solid Black; padding:3px 7px 2px 7px; } &lt;/style&gt; &lt;script src=&quot;./jquery-2.2.3.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(document).ready(function() { // 加载所有的省份 $.ajax({ type: &quot;get&quot;, url: &quot;region_action.php&quot;, // type=1表示查询省份 data: {&quot;parent_id&quot;: &quot;1&quot;, &quot;type&quot;: &quot;1&quot;}, dataType: &quot;json&quot;, success: function(data) { $(&quot;#provinces&quot;).html(&quot;&lt;option value=''&gt;请选择省份&lt;/option&gt;&quot;); $.each(data, function(i, item) { // alert(item.region_id); $(&quot;#provinces&quot;).append(&quot;&lt;option value='&quot; + item.region_id + &quot;'&gt;&quot; + item.region_name + &quot;&lt;/option&gt;&quot;); }); } }); // 加载当前省所有市 $(&quot;#provinces&quot;).change(function() { $(&quot;#region&quot;).empty(); $.ajax({ type: &quot;get&quot;, url: &quot;region_action.php&quot;, // type =2表示查询市 data: {&quot;parent_id&quot;: $(this).val(), &quot;type&quot;: &quot;2&quot;}, dataType: &quot;json&quot;, success: function(data) { $(&quot;#citys&quot;).html(&quot;&lt;option value=''&gt;请选择市&lt;/option&gt;&quot;); $(&quot;#countys&quot;).html(&quot;&lt;option value=''&gt;请选择县&lt;/option&gt;&quot;); $.each(data, function(i, item) { $(&quot;#citys&quot;).append(&quot;&lt;option value='&quot; + item.region_id + &quot;'&gt;&quot; + item.region_name + &quot;&lt;/option&gt;&quot;); }); } }); }); // 加载当前市所有县 $(&quot;#citys&quot;).change(function() { $(&quot;#region&quot;).empty(); $.ajax({ type: &quot;get&quot;, url: &quot;region_action.php&quot;, // type =3表示查询县 data: {&quot;parent_id&quot;: $(this).val(), &quot;type&quot;: &quot;3&quot;}, dataType: &quot;json&quot;, success: function(data) { $(&quot;#countys&quot;).html(&quot;&lt;option value=''&gt;请选择县&lt;/option&gt;&quot;); $.each(data, function(i, item) { $(&quot;#countys&quot;).append(&quot;&lt;option value='&quot; + item.region_id + &quot;'&gt;&quot; + item.region_name + &quot;&lt;/option&gt;&quot;); }); } }); }); // 显示地址 $(&quot;#countys&quot;).change(function() { $(&quot;#region&quot;).empty(); if($(&quot;#provinces&quot;).val()!=&quot;&quot; &amp;&amp; $(&quot;#citys&quot;).val()!=&quot;&quot; &amp;&amp; $(&quot;#countys&quot;).val()!=&quot;&quot;){ var value = $(&quot;#provinces&quot;).find(&quot;option:selected&quot;).text() + $(&quot;#citys&quot;).find(&quot;option:selected&quot;).text() + $(&quot;#countys&quot;).find(&quot;option:selected&quot;).text(); }else{ var value =&quot;您选择的地址有误&quot;; } if($(&quot;#region&quot;)==&quot;&quot;){ $(&quot;#region&quot;).append(&quot;选择的地址是:&quot;+&quot;&lt;input value='&quot; + value + &quot;'&gt;&quot;); }else{ $(&quot;#region&quot;).empty(); $(&quot;#region&quot;).append(&quot;选择的地址是:&quot;+&quot;&lt;input value='&quot; + value + &quot;'&gt;&quot;); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1 align=&quot;left&quot;&gt;省市县三级联动&lt;/h1&gt; &lt;table id=&quot;addr&quot;&gt; &lt;tr bgcolor=&quot;skybule&quot;&gt; &lt;th&gt;省份&lt;/th&gt; &lt;th&gt;市&lt;/th&gt; &lt;th&gt;县&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt; &lt;select id=&quot;provinces&quot;&gt; &lt;option value=&quot;&quot;&gt;请选择省份&lt;/option&gt; &lt;/select&gt; &lt;/th&gt; &lt;th&gt; &lt;select id=&quot;citys&quot;&gt; &lt;option value=&quot;&quot;&gt;请选择市&lt;/option&gt; &lt;/select&gt; &lt;/th&gt; &lt;th&gt; &lt;select id=&quot;countys&quot;&gt; &lt;option value=&quot;&quot;&gt;请选择县&lt;/option&gt; &lt;/select&gt; &lt;/th&gt; &lt;/tr&gt; &lt;/table&gt; &lt;h4 align=&quot;left&quot;&gt; &lt;span id=&quot;region&quot;&gt;&lt;/span&gt; &lt;/h4&gt; &lt;/body&gt; &lt;/html&gt;
    Autor 2018-05-12 08:09:23
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage