如何使用jquery选择器选择带有{{ $item->id }}的Bootstrap模态

问：

我注意到，当 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}')
  });
});