Question

我的地址div包含3个元素：地址（文本区域），城市（下拉列表），地点（下拉列表）。
我们有一个 + 按钮，在现有的下面添加相同的div，动态创建。现在在动态div中，如何在城市下拉列表中调用数据库值，并且位置依赖于城市下拉？在这方面工作时，我能够创建一个新的地址（文本区域），但不能下拉，所以任何人都可以帮助我吗？ enter image description here

        <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>

在动态div中显示下拉列表

1 个答案: