Question

<script>
    $(document).ready(function(){
        $("#region").change(function(){
            region = $(this).val()
            $.ajax({
                type:"POST",
                data:{"region":region},
                url:"get-city.php",
                success:function(data){
                    alert(data);
                    //$("#city").html(data);
                    //$("#state").html(data);
                }
            });
        });
    });
</script>

<select name="region"  id="region" >
    <option value="">Select Region</option>
    <?php 
        $sql = mysqli_query($con, "SELECT * FROM `region`");
        while($row = mysqli_fetch_array($sql)) 
        {
    ?>
            <option value="<?php echo $row['heading_text']; ?>"><?php echo $row['heading_text']; ?></option>
    <?php 
        } 
    ?>
</select>
<select name="state" id="state">
    <option value="">Select Region State</option>
</select>
<select name="city" id="city">
    <option value="">Select Region City</option>
</select>

get-city.php

<?php 
    error_reporting(0);
    include('dbase.php');
    $region = $_POST['region'];
    $sql = "select * from region_data where heading_text='".$region."'";
    $results = mysqli_query($con,$sql);
    while($rows = mysqli_fetch_assoc($results))
    {
        $data[] = array(
                            'state' => $rows['state'],
                            'city' => $rows['name']
                        );
    }
    echo json_encode($data);
?>

在这段代码中，我为region创建了一个简单的下拉列表，其中我将value更改为id，如您在jquery代码中所见。现在，您可以在get-city.php文件中看到，我已经通过json_encode函数对数据进行了编码，可以正常工作。但是问题是我无法在php中的state和city中显示数据。我的json_encode数据如下：

[{"state":"","city":"delhi"},{"state":"","city":"agra"},{"state":"","city":"varanasi"},{"state":"","city":"haridwar"},{"state":"","city":"dharamshala"},{"state":"","city":"srinagar"},{"state":"","city":"mussoorie"},{"state":"","city":"amritsar"},{"state":"","city":"shimla"},{"state":"","city":"kullu manali"},{"state":"","city":"assam"},{"state":"","city":"meghalaya"},{"state":"","city":"arunachal pradesh"},{"state":"","city":"manipur"},{"state":"","city":"nagaland"},{"state":"","city":"J AND K"},{"state":"38","city":"Saharanpur"}]

那么，如何在下拉菜单中获得价值？请帮助我。

谢谢

Answer 1

这是解决方案之一。您可以搜索更多依赖下拉列表

根据需要使用value.city和vvalue.state或将key作为选项value，取决于您自己，我只是向您展示了如何获取值

  $.ajax({
        url:"get-city.php",
        data:{"region":region},
        type: "POST",
        success: function(data) {
            $('select[name="city"]').empty();
            $.each( JSON.parse(data), function(key, value) { // or use data without  JSON.parse(data) 
                $('select[name="city"]').append('<option value="'+ value.state +'">'+ value.city +'</option>');
            });
        }
    });

Answer 2

如果您需要从JSON字符串中获取JavaScript对象，请寻找JSON.parse()。我并没有确切地想要显示数据的方式，但是据我了解，您正在寻找一种填充下拉列表的方法，因此，我将仅向您显示城市部分...对于所有其他下拉列表，流程为一样。

假设在AJAX调用之后（如果需要，在JSON.parse调用之后），您在cities变量中拥有所有城市：

let cities = [{"state":"","city":"delhi"},{"state":"","city":"agra"},{"state":"","city":"varanasi"},{"state":"","city":"haridwar"},{"state":"","city":"dharamshala"},{"state":"","city":"srinagar"},{"state":"","city":"mussoorie"},{"state":"","city":"amritsar"},{"state":"","city":"shimla"},{"state":"","city":"kullu manali"},{"state":"","city":"assam"},{"state":"","city":"meghalaya"},{"state":"","city":"arunachal pradesh"},{"state":"","city":"manipur"},{"state":"","city":"nagaland"},{"state":"","city":"J AND K"},{"state":"38","city":"Saharanpur"}];

cities.map(function(item, index) {
  // let's build an <option> element
  const city = jQuery("<option>", {value: item.city, text: item.city})
  // let's add the <option> element to the right <select>
  jQuery("#city").append(city);
});

Answer 3

您必须在jQuery中使用parseJSON来解码JSON数据，然后将append()的选项值设置为city和state select标签。

<script>
    $(document).ready(function(){
        $("#region").change(function(){
            region = $(this).val()
            $.ajax({
                type:"POST",
                data:{"region":region},
                url:"get-city.php",
                success:function(data){
                    var obj = $.parseJSON(data);
                    $.each(obj, function() {
                        $("#city").append('<option value="'+this['city']+'">'+this['city']+'</option>');
                        $("#state").append('<option value="'+this['state']+'">'+this['state']+'</option>');
                    });
                    //$("#city").html(data);
                    //$("#state").html(data);
                }
            });
        });
    });
</script>

Answer 4

在您的success部分中：

success:function(data){
        for(let i = 0; i < data.length; i++){
            $('select[name="city"]').append('<option value="'+ data[i].city +'">'+ data[i].city +'</option>');
        }
    }

如何获取JSON编码数据到PHP下拉列表中？

4 个答案: