不能在模态的动态表中使用 select2

Question

//some codes from controller
foreach ($medical_packages as $package) {
     $vetting .= '<tr><td>'.$package['item_name'].'</td><td><input type="hidden" name="summary_id" value="'.$package['summary_id'].'"><input type="hidden" name="folio_id" value="'.$package['folio_id'].'"><input type="text" name="sh_qt'.$package['item_id'].'" class="sh_qt" value="'.$package['sh_qt'].'" readonly></td><td><input type="text" name="sh_unit_price'.$package['item_id'].'" class="sh_unit_price" value="'. number_format($package['sh_unit_price'], 2) .'" readonly></td><td><input type="text" name="sh_claimed_amount'.$package['item_id'].'" class="sh_claimed_amount" value="'. number_format($package['sh_claimed_amount'], 2) .'" readonly></td><td><textarea name="sh_adjustment_reason" disabled>'.$package['sh_adjustment_reason'].'</textarea></td><td><input type="number" class="qt" name="wcf_quantity'.$package['item_id'].'" class="wcf_quantity" min="0" value="'.$this->wcf_quantity($package) .'" '.$this->read_only($can_edit) .'><span class="help-block label label-danger error_field wcf_quantity'.$package['item_id'] .'_error mt-1"></span></td><td><input type="text" name="wcf_unit_price'. $package['item_id'] .'" class="wcf_unit_price" min="0" value="'. $this->wcf_unit_price($package) .'" readonly><span class="help-block label label-danger error_field wcf_unit_price'. $package['item_id'].'_error mt-1"></span></td><td><input type="text" name="wcf_vetted_amount'. $package['item_id'] .'" class="wcf_vetted_amount" value="'. $this->wcf_vetted_amount($package) .'" readonly></td><td><select style="width:100%;" name="wcf_adjustment_reason'.$package['item_id'].'" class="form-control search-select" placeholder="Reasons" ><option></option>'.$this->predefined_reasons($predefined_vetting_reasons, $package['wcf_adjustment_reason']).'</select><span class="help-block label label-danger error_field wcf_adjustment_reason'.$package['item_id'].'_error mt-1"></span></td></tr>';
   }
//the class i use is search select, they are dynamically rendered in table inside the modal
//some of the modal codes
<div class="modal hide fade" id="vetting-modal" role="dialog" aria-labelledby="vetting_modal" aria-hidden="true" style="overflow:hidden;">
    <div class="modal-dialog  modal-xl white_modal" role="document">
        <div class="modal-content" id="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
//the rendering table
<table class="table table-bordered table-striped table-responsive" id="vetting_table">
                                        <thead>
                                            <th>Name</th>
                                            <th>HSP Quantity</th>
                                            <th>HSP Unit Price</th>
                                            <th>HSP Claimed Amount</th>
                                            <th>HSP Adjustment Reason</th>
                                            <th>WCF Quantity</th>
                                            <th>WCF Unit Price</th>
                                            <th>WCF Vetted Amount</th>
                                            <th>WCF Adjustment Reason</th>
                                        </thead>
                                        <tbody class="vetting">
                                          
                                         </tbody>
                                    </table>

//the jqueries from ajax call
 $('.bill_diseases').append(data.disease)
                            $('.medical_packages').append(data.medical)
                            $('.vetting').append(data.vetting)

我试图在 laravel 中使用 select2 进行搜索选择，但对于我使用 dropdownparent、bs open modal、_enforceFocus 等的模态，它似乎无法动态工作，但它们都不起作用。

Answer 1

嗯，有很多方法可以做到这一点.. 甚至你的代码也没有说太多。

1-你可以在成功的ajax调用中初始化select

$.ajax({
//...,
success(){
  $('.bill_diseases').append(data.disease)
  $('.medical_packages').append(data.medical)
  $('.vetting').append(data.vetting)
  $('#your-select').select2()  //<----- last one
}

})

2- 您可以在打开模式时收听它。

$('#myModal').on('show.bs.modal', function (e) {
  $('#your-select').select2()
   // Or destroy&init it
   $('#your-select').select2('destroy')
   $('#your-select').select2()


})

Answer 2

感谢大家的支持，我唯一要做的就是在添加后不久初始化select2，并将模态设置为下拉父级

$('.vetting').append(data.vetting)$('.search-select').select2({dropdownParent: $('#vetting-modal'),})