Question

我正在尝试填充一个下拉框，具体取决于选择了哪个县。第二个下拉框应填充所选县的省份。

我不明白为什么第二个下拉列表没有出现。我在控制台中收到JSON响应，因此PHP是正确的。我确信这有些愚蠢，但是我看不到它。预先感谢。

index.php页面

<?php
    include "config.php";
?>
<!doctype html>
<html>
    <head>
        <title>dropdown</title>
        <link href="style.css" rel="stylesheet" type="text/css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="jquery-1.12.0.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $( document ).ready( function () {

                $( "#country" ).change( function () {
                var countryid = $( this ).val();

                    $.ajax( {
                        url: 'getUsers.php',
                        type: 'POST',
                        data: {
                            countryid: countryid
                        },
                        dataType: 'json',
                        success: function ( response ) {

                            var len = response.length;

                            $( "#province" ).empty();
                            for ( var i = 0; i < len; i++ ) {
                                var id = response[ i ][ 'provinceid' ];
                                var name = response[ i ][ 'provincename' ];

                                $( "#province" ).append( "<option value='" + id + "'>" + name + "</option>" );

                            }
                        }
                    } );
                } );

            } );
        </script>
    </head>
    <body>


        <div>Country</div>
        <select id="country">
            <option value="0">- Select -</option>
            <?php 
                // Fetch Country
                $stmt = $conn->prepare('SELECT * FROM countries');
                $stmt->execute();

                while($countries = $stmt->fetch()) {

                $countryid = $countries['id'];
                $countryname_en = $countries['countryname_en'];

                // Option
                echo "<option value='".$countryid."' >".$countryname_en."</option>";
                }


            ?>
        </select>
        <div class="clear"></div>

        <div>Province</div>
        <select id="province">
            <option value="0">- Select -</option>
        </select>
    </body>
</html>

PHP

<?php

    include "config.php";

    var_dump($_POST);
    $countryid = $_POST['countryid'];

    $countryid = "CA";

    $stmt = $conn->prepare('SELECT * FROM provincestates WHERE countryid = :countryid');
    $stmt->execute(array(
        ':countryid' => $countryid
    ));

    /*
    echo "<pre>";
    echo "prov is:" . $province_array = array();
    echo "</pre>";
    */


    while ($province = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $provinceid   = $province['provincestatecode'];
        $provincename = $province['provincestatename_en'];

        $province_array[] = array(
            "provinceid"    => $provinceid,
            "provincename"  => $provincename
        );
    }

    echo json_encode($province_array);

Answer 1

我对jQuery并不是很熟悉，但是似乎您需要使用JSON.parse（或本机jQuery方法？）来解析响应，然后您就应该能够访问数据了。以下内容可能会为您指明正确的方向-否则可能不会正确，因为未经测试...

<script>
    $( document ).ready( function () {

        $( "#country" ).change( function () {
            var countryid = $( this ).val();

            $.ajax( {
                url: 'getUsers.php',
                type: 'POST',
                data: {
                    countryid: countryid
                },
                dataType: 'json',
                success: function ( response ) {
                    var json=JSON.parse( response ); /* PARSE the data */
                    $( "#province" ).empty();

                    for( var i in json ){/* access using object notation */
                        var obj=json[ i ];
                        var id=obj.provinceid;
                        var name=obj.provincename;

                        $( "#province" ).append( new Option(id,name) );
                    }
                }
            });
        });
    });
</script>

Answer 2

我终于明白了：

显然JSON.parse已过时，我不得不将其从var json = JSON.parse（response）更改；只是var response = response

感谢您的所有帮助！

依赖下拉列表不填充

2 个答案: