javascript - 如何在模式打开而不是页面加载时填充组合

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...
})