php - 在动态 div 中显示下拉菜单

Question

我有一个地址 div，其中包含 3 个元素:地址(文本区域)、城市(下拉菜单)、地点(下拉菜单)。
我们有一个 + 按钮，可以在现有的动态创建的下面添加相同的 div。现在在动态 div 中，如何调用城市下拉列表中的数据库值以及位置依赖于城市的下拉列表？ 在处理此问题时，我可以创建一个新的地址(文本区域)，但不能创建下拉列表，所以任何人都可以在这里帮助我吗？

        <script>
            $(document).ready(function () {
var counter = 0;
$("#addButton").click(function () {
        if (counter > 100) {
            alert("Only 100 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>' + 
          '<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>' +
          '<div class="col-lg-3 form-group" id="city' + counter +'"></div><div class="col-lg-3 form-group" id="locality' + counter  +'"></div><div class="col-lg-6 col-lg-offset-6"></div>';


        counter++;
        return false;



                });

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

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

counter--;

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


});

});

HTML:

                 <button type="button" class="btn btn-default btn-sm" id="addButton">
                    <span class="glyphicon glyphicon-plus"></span>
                 </button>
            </div>
            <div class="col-lg-6 form-group col-lg-offset-6">
            </div>

               <div class="col-lg-6 form-group col-lg-offset-6">
            </div>

            <div class="col-lg-3 form-group">
                <select name="city_name" id="city_name" class="form-control" required>
                    <option value="" selected="selected">Select city</option>
        <?php
        $sql="select * from city";

                    $res=mysqli_query($con,$sql);

                    while($row=mysqli_fetch_array($res))

            {

                   echo "<option value='$row[city_id]'>$row[city_name]</option>";
                     }
                     ?>

                </select>
            </div>
            <div class="col-lg-3 form-group">
                <select name="locality_name" id="locality_name" class="form-control" required>
                    <option value="" selected="selected" >Select Locality</option>

        </select>
        </div>
        <div class="col-lg-6 col-lg-offset-6">
        </div>


            </div>

            <div class="col-lg-6 form-group col-lg-offset-6">
            </div>

             <div class="col-lg-5" id='TextBoxesGroup'>


             </div>

                <!---Address-->

Answer 1

   $city_name = array();
    $city_id   = array();

    while($row=mysqli_fetch_array($res))
    {
        array_push($city_id,$row[city_id]);
        array_push($city_name,$row[city_name]);
    }

    $count = count($city_id);

现在你在不同的数组中得到了 city_id 和 city_name 。 现在在 javascript 中循环它们。

    <script>

    var city_id = '<?php echo json_encode($city_id ); ?>';
    var city_name = '<?php echo json_encode($city_id ); ?>';

    var count = '<?php echo $count; ?>'

     for(var k=0;k<count;k++){

         //  Add options here.
     }
    </script>