Javascript 如何使用数据库值填充动态追加div中的下拉列表

Javascript 如何使用数据库值填充动态追加div中的下拉列表,javascript,php,mysql,ajax,Javascript,Php,Mysql,Ajax,我想使用php、mysql和ajax在我附加的div中创建一个下拉列表,但它对我不起作用。下面是javascript代码,其中city和Location来自ajax和php,并在+按钮单击时在动态div中创建: Javascript: <script> $(document).ready(function () { var counter = 0; $("#addButton").click(function () { if (counter > 19) {

我想使用php、mysql和ajax在我附加的div中创建一个下拉列表,但它对我不起作用。下面是javascript代码,其中city和Location来自ajax和php,并在+按钮单击时在动态div中创建: Javascript:

<script>
$(document).ready(function () {
var counter = 0;
$("#addButton").click(function () {
        if (counter > 19) {
            alert("Only 20 Address allowed");
            return false;
        }


    var elems = '<div class="col-lg-5"  id="Address' + counter + '">'+
          '<textarea class="form-control" name="alt_address[]" rows="3" placeholder="Address' + (counter+1) + '" /><div class="col-lg-6 form-group col-lg-offset-6"> </div>' +
          '<div class="col-lg-3 form-group" id="city' + counter + '">'+
          '<select name="city_name[]" id="city_name' + counter + '" class="form-control"></select>' +
          '</div><div class="col-lg-3 form-group"><select name="locality_name[]" id="locality_name' + counter + '" class="form-control"><option value="" selected="selected" >Select Locality</option></select></div></div>' + 
          '<div class="col-lg-1 form-group">'+
          '<button type="button" class="removebtn" id="removeButton' + counter + '">' +
          '<span class="glyphicon glyphicon-minus"></span></button>' +
          '</div><div class="col-lg-6 form-group col-lg-offset-6"> </div>' ;


    $('#addressDiv').append(elems);

        counter++;

         $.ajax({

        type:"Post",

        url:"city_load.php",



        cache:"false",

        success:function(html){

            $("#locality_name" + counter).html(html);

        }

        });

         return false;
         });

         $("#city_name" + counter).change(function(){



    $city_id = $(this).val();



    $.ajax({

        type:"Post",

        url:"ajax-dd3ck.php",

        data:"city_id="+$city_id,

        cache:"false",

        success:function(html){

            $("#locality_name" + counter).html(html);

        }

        });

    });



                $(document).on('click','.removebtn',function () {

                if(counter==0){
      alert("No more textbox to remove");
      return false;
   }   

counter--;

    $("#Address" + counter).remove();
    $("#removeButton" + counter).remove();






});


});

这是因为语法不正确:

while($row=mysqli_fetch_array($res))
     echo "<select name='city_name' id='city_name'$i class='form-control'>";
{
那应该是

echo "<select name='city_name' id='city_name'$i class='form-control'>";
while($row=mysqli_fetch_array($res)) {
id='city\u name'$i也是一个HTML错误,但不应影响PHP


你实际上没有在其他任何地方使用$i或增加它,所以我不确定你为什么会使用它。

我已经纠正了我的语法错误并尝试了,但是当我单击+符号时,城市框没有出现。我为城市添加了div,如下所示:这就是我添加$i的原因。请帮助我使用select返回ajax请求?$i应该在单个报价中;outside将其置于属性值之外。当从数据库值填充下拉列表时,是否有任何方法可以在动态创建的div中创建下拉列表,并且它有一个类似于上面代码的级联下拉列表。请参见snag.gy/AIA9k.jpgChris-Ajax上的屏幕截图。在city_load.php中没有使用city的select标记。请建议解决方案它是否发出ajax请求?如果是,它是否返回任何内容,或者页面是否抛出500?city_load.php: