如何禁用模态框中Select2下拉框的自动聚焦？

问题分析 #

你通过调用.select2('open').select2('close')解决了Select2下拉框定位错误的问题，但该操作会触发每个Select2元素的聚焦逻辑，导致页面滚动到对应元素，影响体验。核心原因是select2('open')方法会自动聚焦下拉框的搜索框，多次执行就会引发连续滚动。

解决方案 #

不需要依赖开闭下拉框来修复定位，只需确保在模态框完全显示后正确初始化Select2，并通过触发重绘事件来保证定位准确，同时避免聚焦操作。

修改后的代码

HTML部分（无需改动）

<a
  class="edu_btn edu_btn_primary me-10"
  data-toggle="modal"
  data-target="#dataFilter"
  ><i class="fa fa-filter me-1" aria-hidden="true"></i><span>Filter</span></a
>
<div
  class="modal center-modal sk_modal fade"
  id="dataFilter"
  tabindex="-1"
  aria-labelledby="dataFilterLabel"
  aria-hidden="true"
>
  <div class="modal-dialog w-400">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title modal-t-color">
          <i class="fa fa-filter pe-2" aria-hidden="true"></i> Filter
        </h5>
      </div>
      <div class="modal-body">
        <form action="">
          <div class="row">
            <div class="col-md-12">
              <select data-placeholder="Select Library" class="customSelect">
                <option>option1</option>
                <option>option2</option>
              </select>
              <select data-placeholder="Select Library" class="customSelect">
                <option>option1</option>
                <option>option2</option>
              </select>
              <select data-placeholder="Select Library" class="customSelect">
                <option>option1</option>
                <option>option2</option>
              </select>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

JavaScript部分

$(document).ready(function () {
  $('.modal').on('shown.bs.modal', function () {
    const $currentModal = $(this);
    // 仅初始化当前模态框内的Select2元素，避免全局影响
    $('.customSelect', $currentModal).each(function () {
      $(this).select2({
        // 将下拉框挂载到模态框内容容器内，确保定位准确且不被模态框截断
        dropdownParent: $currentModal.find('.modal-content'),
        // 可选：禁用搜索框（如果不需要搜索功能，也能减少聚焦触发）
        minimumResultsForSearch: Infinity
      });
    });

    // 触发resize事件，让Select2重新计算下拉框位置，无需打开下拉框
    $('.customSelect', $currentModal).trigger('select2:resize');
  });
});

关键优化点 #

1. 精准定位下拉框容器：将dropdownParent设置为模态框的.modal-content，确保下拉框在模态框的DOM层级内，避免被模态框的overflow:hidden样式截断，同时初始化时就能正确计算位置。
2. 仅操作当前模态框元素：通过$('.customSelect', $currentModal)限定操作范围，不会影响页面其他Select2组件。
3. 用resize替代开闭操作：触发select2:resize事件让Select2重新计算位置，完全避开了open/close带来的聚焦问题。
4. 可选禁用搜索框：如果不需要搜索功能，添加minimumResultsForSearch: Infinity可以隐藏搜索框，进一步避免聚焦触发。

备选方案（若仍需开闭操作） #

如果必须通过open/close修复定位，可以临时阻止聚焦事件：

$(document).ready(function () {
  $('.modal').on('shown.bs.modal', function () {
    const $currentModal = $(this);
    $('.customSelect', $currentModal).each(function () {
      const $select = $(this);
      $select.select2({
        dropdownParent: $currentModal
      });

      // 临时绑定一次open事件，阻止聚焦
      $select.one('select2:open', function(e) {
        // 阻止默认聚焦行为
        $(this).data('select2').$search.blur();
      });

      $select.select2('open').select2('close');
    });
  });
});

内容的提问来源于stack exchange，提问作者Sachin Singh