根据Jquery Ajax返回的值填充第二个下拉列表 [英] Populate a second dropdown accoriding to the values returned by Jquery Ajax

问题描述

我取消了这段代码，以检查该机制是否有效.实际上，我需要实现的是根据州"下拉列表中的选择填充城市下拉列表".HTML代码如下.

I scrapped this code to check if the mechanism works. Actually what I needed to achieve was to populate a "city dropdown" as per the selection made with the "state" dropdown. The HTML code is as follows.

     <select id="id"></select>
     <select id="state"></select>
     <select id="city"></select>

Ajax调用如下.

$(document).on("change", '#state', function(e) {
            var state = $(this).val();


        $.ajax({
            type: "POST",
            data: {state: state},
            url: 'get_name_list.php',
            dataType: 'json',
            success: function(json) {

                var $el = $("#city");
                $el.empty(); // remove old options
                $el.append($("<option></option>")
                        .attr("value", '').text('Please Select'));
                $.each(json, function(value, key) {
                    $el.append($("<option></option>")
                            .attr("value", value).text(key));
                });                                                     




            }
        });

    });

PHP代码使用以下结构将值列表编码为JSON.

The PHP code encodes the list of values into a JSON with the following structure.

作为测试，我将JSON插入到数据库表中，并且到现在为止都可以使用.因此，这不是一个理论过程.它会一直工作到代码中的这一点.

As a test, I inserted the JSON into a Database table and it is working until this point. So it is not a theoretical process. It works until this point in the code.

JSON结构如下.

[{"name":"Alappuzha"},{"name":"Ernakulam"},{"name":"Idukki"},{"name":"Kannur"},{"name":"Kasaragod"},{"name":"Kollam"},{"name":"Kottayam"},{"name":"Kozhikode"},{"name":"Malappuram"},{"name":"Palakkad"},{"name":"Pathanamthitta"},{"name":"Thiruvananthapuram"},{"name":"Thrissur"},{"name":"Wayanad"}]

然后我回显JSON.

但是第一页上的下拉列表没有被填充.PHP文件如下.

But the dropdown back at the first page is not getting populated. The PHP file is as follows.

$json= array();
$id=$_POST["id"];
//echo  $sample;

 //mysqli_query($mysqli,"INSERT into test_tablr values('','$id')") or die(mysqli_error($mysqli)); 


if ($result = $mysqli->query("SELECT name FROM geo_locations  WHERE parent_id =$id ")) {

    while ($row = mysqli_fetch_assoc($result)) {
            $json1[] = $row;
    }
    $json=json_encode($json1);
}


mysqli_query($mysqli,"INSERT into test_tablr values('','$json')") or die(mysqli_error($mysqli)); 
echo $json;

但是不幸的是，下拉列表没有被填充.有灯吗?

But unfortunately, the dropdown is not getting populated. Any lights?

推荐答案

在jQuery中尝试一下:

Try This in jQuery:

    var $el = $("#city"); 
    $el.empty(); // remove old options
    $el.append($("<option value=''>Please Select</option>");
    $.each(json, function(value, key) {
        $el.append($("<option value='"+ value +"'>"+key+"</option>");
    });           

这篇关于根据Jquery Ajax返回的值填充第二个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！