php - 当第一个下拉菜单被更改时，我无法加载第二个下拉菜单。第二个下拉取决于第一个

Question

这是我的代码，在显示第二个值时出现问题：

HTML：我的表单，第一个下拉列表我通过查询从数据库中获取元素。

                    <form name="farmer" action="index.php" method="post">
                                    <label>
                                        <span>Chose Land:</span>
                                        <select name="land" id="land">
                                            <option value="">--land--</option>
                                                <?php 
                                                    $sql="SELECT `city` FROM `lands`";
                                                    $result =mysql_query($sql);
                                                    while ($data=mysql_fetch_assoc($result)){
                                                ?>
                                            <option value ="<?php echo $data['city'] ?>" ><?php echo $data['city'] ?></option>
                                                <?php } ?>
                                        </select>
                                    </label>

                                <label>
                                        <span>Region:</span>
                                        <select name="region" id="region">
                                            <option value="">--region--</option>
                                        </select>
                                </label>

                     <input class="button4" type="submit" name="submit" value="Submit" />
                 </form>

JS

        jQuery(document).ready(function() {
        jQuery('#land').change(function() {
            jQuery.post(
                'getList.json.php', {
                    'land': jQuery('#land').val()
                },
                function(data, textStatus) {
                    jQuery('#region').empty();
                        if(data != null)
                        {
                            jQuery.each(data, function(index, value) {
                                jQuery('#region').append('<option value="' + value + '">' + value + '</option>');
                            });
                        }
                        else {
                            jQuery('#region').append('<option value="">Please select...</option>');
                        }
                },
                'json'
            );
        });
     });

getList.json.php 文件 - 在这里我使用查询（JOIN）在区域和土地之间建立连接。

<?php

mysql_connect("localhost", "root", "") or die( "Unable to connect to database");
mysql_select_db("farmer_fields") or die( "Unable to select database");

if($_POST && $_POST['land'] != "") {

    $sql="SELECT region FROM regions
                LEFT JOIN lands
                ON regions.id_lands = lands.id";
    $rows = array();
        while ($data=mysql_fetch_assoc($sql)){
            $rows['region'] = $data;                                
        }
    echo json_encode( $rows  );
}
?>

Answer 1

检查这个，对我有用。

JS：

jQuery(document).ready(function() {
    var region = jQuery('#region');
    var land = jQuery('#land').change(function() {
        jQuery.post(
            'getList.json.php', {
                'land': land.val()
            },
            function(data) {
                jQuery('#region').empty();
                if (data != null) {
                    region.append(data);
                }
                else {
                    region.append('<option value="">Please select...</option>');
                }
            },
            'html'
        );
    });
 });

PHP：

if($_POST && $_POST['land'] != "") {
    $sql="SELECT region
            FROM regions r
            LEFT JOIN lands l ON r.id_lands = l.id
           WHERE l.city = " . $_POST['land'];
    $result = mysql_query($sql); // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< UPD!
    while ($data = mysql_fetch_assoc($result)) {
        echo '<option value="' . $data['region'] . '">' . $data['region'] . '</option>';
    }
}

Answer 2

这里不需要json。您可以简单地使用 jquery 和 ajax

jQuery：

function get_region(country_id) {
    if (country_id != 0) {
        $("#region_id").html("<option value='0'>Select Region</option>");
        $("#region_id").prop("disabled", true);

        $.post("ajax/ajax.php", {
            country_id: country_id
        }, function (data) {

            var data_array = data.split(";");
            var number_of_name = data_array.length - 1;
            var value;
            var text;
            var opt;
            var temp_array;

            for (var i = 0; i < number_of_name; i++) {
                temp_array = data_array[i].split(",");
                value = temp_array[1];
                //alert(value);
                text = temp_array[0];
                opt = new Option(text, value);
                $('#region_id').append(opt);
                $(opt).text(text);
            }
            $("#region_id").prop("disabled", false);
        });
    } else {
        $("#region_id").html("<option value='0'>Select Region</option>");
        $("#region_id").prop("disabled", true);
    }
}

ajax 文件，即 ajax.php

if (isset($_POST["country_id"])) {
    $country_id = $_POST["country_id"];
    $region_select = mysql_query("select * from region where country_id='$country_id'");
    $region = "";
    $region_id = "";
    while ($region_row = mysql_fetch_array($region_select)) {
        $region = $region.$region_row["region"].
        ",".$region_id.$region_row["id"].
        ";";
    }
    echo $region;
}

区域选择框的 HTML：

<select name="region_id" id="region_id" disabled="disabled">
    <option value="0">Select Region</option>
</select>

出于安全目的，您可以更改mysql_query为 PDO，因为mysql_query已贬值。