Question

我有一个包含组合框的模态，这个组合框是从数据库中填充的，我希望在打开模态而不是页面加载时填充组合框，怎么能这样做？

div class="modal fade" id="modal-DeleteFrm">
<div class="modal-dialog modal-sm" style="width:300px;">
    <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="modal-title">Delete Farmer</h3>
        </div>
        <div class="modal-body">
            <div class="well" style="margin-bottom: 0px;padding: 10px;">
                <div>
                    <label class="Modallabel">Farmer Name:</label>
                </div>
                <div>                           
                    <select style="width:100%;background-color: #101d49;color:#ffffff;padding-bottom: 5px;" name="FarmerName" id="FarmerName">
                        <option value="">Select Farmer Name</option>
                        <!--populate value using php-->
                            <?php
                                 $stmt ="SELECT * FROM Farmers";
                                 foreach ($conn->query($stmt) as $row) {
                                    $FarmerName = $row['first_name_'].' '.$row['last_name_'];
                            ?>
                            <option value="<?php echo $row['Farmer_ID'];?>"><?php echo $FarmerName;?></option>
                            <?php
                                }
                            ?>
                    </select>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button id="submitbtn" name="submitbtn" type="button" class="btn btn-success btn-md" style="text-align:center;margin:0;width: 75px;" onclick="DeleteEntry('DeletedFarmer')">Delete</button>
            <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()" style="text-align:center;font-weight: bold;">Cancel</button>
        </div>
    </div>
</div>

Answer 1

您需要将模式打开事件的回调设置为此代码。然后将您的选择填充到其中：

$('#modal-DeleteFrm').on('shown.bs.modal', function () {
  // write your codes here...
})

Answer 2

单击模态按钮时，您可能应该执行ajax请求。即。

$('.modal-DeleteFrm.').on('click', function(){
    $.ajax([
      url: YOUR-POST-URL 
      dataType: json,
      method: POST,
      success: function() {
         // Do your appending here
      }
  ])
})

哪个会发送POST请求并将数据作为JSON返回。然后，您可以使用javaScript .append（）

将其附加到模态表单

如何填写模态打开组合而不是页面加载

2 个答案: