Question

我需要一点帮助。我正在创建一个动态下拉列表，但我不知道如何在元素中显示ajax结果。

这是我的情景：

用户将在下拉列表中选择一个州。
选择代码后会发送ajax请求
发送后，在名为“cities”

所以有2个选择框。一个是'州'，第二个是'城市'。这是我的代码：

这是我访问控制器的jquery

$('#state').on('change',function(){

    var state_code = $('#state').val();

    var city_url = '<?php echo site_url("locations/displayCity/' + state_code + '"); ?>';

    $.ajax({

        type: 'POST',
        url: city_url,
        data: '',
        dataType: 'json',
        success: function(){
            //
        }

    });

});

这是我在模型中的功能

public function getCity($code){

    $sql = "SELECT id,name FROM ref_cities WHERE province_code = '".$code."'";
    $result = $this->db->query($sql);

    return json_encode($result->result_array());

}

这是控制器部分

public function displayCity($code){

    $x = json_decode($this->locations_model->getCity($code));

    return print_r($x);

}

以下是我选择城市代码的代码

<select id="state" name="state">
    <option value="">---Select State---</option>
    <?php

        $decode_city = json_decode($city,true);

        foreach($decode_city as $m){
            echo "<option value='".$m['code']."' ".set_select('state',$m['code']).">".$m['name']."</option>";
        }

    ?>
</select>

这是我应该把ajax结果放在哪里的部分

<select id="city" name="city">
    <option value="">---Select City---</option>
    <!-- INCLUDE LOOP TO DISPLAY cities -->
</select>

Answer 1

试试这个，

jQuery.ajax({

        type: 'POST',
        url: city_url,
        data: '',
        dataType: 'json',
        success: function(data){
            //you will get the result in data
           //jQuery("#someDiv").html(data);
           //The parsed data is something like below
           jQuery.each(jQuery.parseJSON(data), function(key,value){
           jQuery("#city").append('<option value ="'+value+'">'+value+'</option>');
           });
        }


    });

希望它得到修复。

Answer 2

做这样的事情

    $('#state').on('change',function(){

            var state_code = $('#state').val();

            var city_url = 'controller_file.php?state_code=<?php echo state_code; ?>';

            $.ajax({

                type: 'GET',
                url: city_url,
                data: '',
                dataType: 'json',
                success: function (response) {
                 var response_arr = JSON.parse(response);

                   $.each(response_arr ,function(index,value)
                   {
                    $("#city").append("<option value="+value.id+">"+value.name+"</option>");
});
                }

            });

        });

在controller_file.php文件中

写这个

displayCity($_GET['state_code']);

Answer 3

$('#state').on('change',function(){
var cityList = '';
    var state_code = $('#state').val();

    var city_url = '<?php echo site_url("locations/displayCity/' + state_code + '"); ?>';

    $.ajax({

        type: 'POST',
        url: city_url,
        data: '',
        dataType: 'String',
        success: function(data){

                  $('#city').html(data);
        }

    });

});

你可以像这样重写你的代码。它会起作用

或者你可以试试这个

public function getCity($code){

    $sql = "SELECT id,name FROM ref_cities WHERE province_code = '".$code."'";
    $result = $this->db->query($sql);
    $cities = $result->result_array();
    $options = '';
    foreach($cities as $city){
    $options .= '<option value="'.$city["id"].'">'.$city["name"].'</option>';
    }
    return $options;

}

这应该可以试试这个

Answer 4

你的成功函数必须是这样的

$.each($.parseJSON(data), function(key,value){
    $('<option/>','{value:'+value+'}').appendTo('#yourparent');
});

Answer 5

我设法回答了我的问题。这就是我做的事情

在我的控制器中，我删除了json_decode（）。现在我有了这个

public function displayCity($code){
    $x = $this->locations_model->getCity($code);
    echo $x;
}

然后我可以在控制台中访问它。

$.ajax({

    type: 'POST',
    url: city_url,
    data: '',
    dataType: 'json',
    async: false,
    success: function(i){
       console.log(i);
    }

});

如何从Ajax Request获取返回值并将其分配给元素？

5 个答案: