如何使用 jquery 选择器通过 {{ $item->id }} 选择 Bootstrap Modal

Question

我注意到当 select2 处于模态时，搜索输入不可聚焦，向上和向下键也不起作用。 jQuery：3.6.1 选择2：4.1.0

我想使用 jquery 选择器在我的引导模式中查找/选择 select2 搜索输入，例如 {{ $item->id }} 。

<div class="modal modal-end" tabindex="-1" id="edit{{ $item->id }}" aria-labelledby="modalRightLabel">
    <div class="modal-header">
        <h5 id="modalRightLabel">EDIT FRUIT</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="modal " aria-label="Close"></button>
    </div>
    
    <div class="modal-body">
        <form action="/fruit/{{ $item->id }}" method="POST">
           {{ method_field('put') }}
           {{ csrf_field('') }}
    
           <div class="form-group mb-3">
               <label class="form-label">Fruit name</label>
               <input type="text" class="form-control" name="fruit" value="{{ $item->fruit_name}}" placeholder="Fruit Name" required>
                </div>
    
    
            <div class="form-group mb-3">
                 <label class="form-label">Category</label>
                 <select name="category" class="js-example-placeholder-single" required>
                     <option value="{{ $item->id }}">{{ $item->category }}</option>
                     <option value="Berries">Berries</option>
                     <option value="Tropical Fruits">Tropical Fruits</option>
                     <option value="Citrus Fruits">Citrus Fruits</option>
                 </select>
            </div>
    
            <div class="text-center">
                <button type="button" class="btn btn-danger label-btn me-2" data-bs-dismiss="modal" aria-label="Close"><i class="ri-close-line me-2"></i>Cancel</button>
                <button type="submit" class="btn btn-primary"> <i class="ri-checkbox-circle-line me-2"></i> <span>Save Changes</span></button>
            </div>
        </form>
    </div>
</div>

我尝试过这个

$(function(){
  $('.js-example-placeholder-single').select2({
      dropdownParent: $('#edit{id}')
  });
});

Answer 1

我认为 jQuery 选择器应该是动态的，以匹配每个模式的唯一 ID，这样我们就可以为选择元素使用一个类，然后迭代每个实例。我认为像下面这样的东西应该可以工作

$(function() {
    $('.js-example-placeholder-single').each(function() {
        var $select = $(this);
        var modalId = $select.closest('.modal').attr('id');
        $select.select2({
            dropdownParent: $('#' + modalId)
        });
    });
});