CoreUI Multiselect表单数据重置与选项最大高度设置求助

一、解决选中字段重置失效问题 #

你的重置逻辑存在两个核心问题：一是CoreUI组件实例获取方式错误，二是未阻止表单默认重置行为导致冲突。修正后的方案如下：

修正后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  const resetButton = document.getElementById('resetButton');
  const multiSelects = document.querySelectorAll('.form-multi-select');

  resetButton.addEventListener('click', function(e) {
    // 阻止表单默认重置行为，避免与自定义逻辑冲突
    e.preventDefault();

    multiSelects.forEach(select => {
      // 通过CoreUI官方API获取组件实例（适配5.x版本）
      const coreUISelect = window.CSelect.getInstance(select);
      if (coreUISelect) {
        // 调用CoreUI API清空选中值，同步更新UI
        coreUISelect.setValue([]);
      }

      // 同步原生select元素状态，重置到占位选项
      for (let i = 0; i < select.options.length; i++) {
        select.options[i].selected = false;
      }
      select.selectedIndex = 0;
    });

    // 重置日期输入框
    document.getElementById('date-from').value = '';
    document.getElementById('date-to').value = '';
  });
});

关键修正点 #

1. 拦截默认重置行为：按钮类型为reset时会触发表单原生重置，不会同步CoreUI组件的UI状态，必须用e.preventDefault()拦截。
2. 正确获取组件实例：CoreUI 5.x版本需通过window.CSelect.getInstance(select)获取实例，而非直接访问select.CoreUISelect。
3. 优先调用组件API：通过CoreUI的setValue([])方法清空选中值，确保组件内部状态与前端UI同步。

二、设置选项列表最大高度 #

通过自定义CSS控制CoreUI下拉菜单的高度，添加以下样式即可：

/* 自定义多选下拉选项列表的最大高度 */
.c-select .c-dropdown-menu {
  max-height: 200px; /* 根据需求调整高度值 */
  overflow-y: auto; /* 超出高度时显示滚动条 */
}

说明 #

CoreUI的多选下拉选项列表容器使用.c-dropdown-menu类，通过设置max-height和overflow-y属性，即可实现列表高度限制与滚动效果。

完整代码示例 #

HTML部分 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@coreui/coreui-pro@5.5.0/dist/css/coreui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@coreui/coreui-pro@5.5.0/dist/js/coreui.bundle.min.js"></script>

<style>
  .c-select .c-dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
  }
</style>

<form id="filterForm" class="form-inline gap-2">
  <div class="form-group mb-2">
    <select id="sales-director-filter" class="form-multi-select" multiple data-coreui-search="true" data-coreui-selection-type="counter" data-coreui-placeholder="Sales Director">
      <option value="" disabled selected>Sales Director</option>
      <option value="Jayson Cheves">Jayson Cheves</option>
      <option value="Ahmed Mohamed">Ahmed Mohamed</option>
      <option value="Rajesh Sankaran">Rajesh Sankaran</option>
      <option value="Ashley Philips">Ashley Philips</option>
    </select>
  </div>
  <div class="form-group mb-2">
    <select id="rsm-filter" class="form-multi-select" multiple data-coreui-search="true" data-coreui-selection-type="counter" data-coreui-placeholder="RSM's">
      <option value="" disabled selected>RSM's</option>
      <option value="Karim Dhanani">Karim Dhanani</option>
      <option value="Anayeli Valle">Anayeli Valle</option>
      <option value="Joel Ramirez">Joel Ramirez</option>
    </select>
  </div>
  <div class="form-group mb-2">
    <select id="dsm-filter" class="form-multi-select" multiple data-coreui-search="true" data-coreui-selection-type="counter" data-coreui-placeholder="DSM's">
      <option value="" disabled selected>DSM's</option>
      <option value="Karim Dhanani">Karim Dhanani</option>
      <option value="Anayeli Valle">Anayeli Valle</option>
      <option value="Joel Ramirez">Joel Ramirez</option>
    </select>
  </div>
  <div class="form-group mb-2">
    <select id="location-filter" class="form-multi-select" multiple data-coreui-search="true" data-coreui-selection-type="counter" data-coreui-placeholder="Location">
      <option value="" disabled selected>Locations</option>
      <option value="10th Street">10th Street</option>
      <option value="13th Street">13th Street</option>
      <option value="1st Street">1st Street</option>
      <option value="28th Street">28th Street</option>
    </select>
  </div>

  <div class="form-group mb-2">
    <input type="date" class="form-control" id="date-from">
  </div>
  <div class="form-group mb-2">
    <input type="date" class="form-control" id="date-to">
  </div>
  <div class="ml-auto d-flex gap-2">
    <button type="button" class="btn btn-primary">Search</button>
    <button id="resetButton" type="reset" class="btn btn-primary">Reset</button>
    <button type="button" class="btn btn-primary">Export</button>
  </div>
</form>

JavaScript部分 #

document.addEventListener('DOMContentLoaded', function() {
  const resetButton = document.getElementById('resetButton');
  const multiSelects = document.querySelectorAll('.form-multi-select');

  resetButton.addEventListener('click', function(e) {
    e.preventDefault();

    multiSelects.forEach(select => {
      const coreUISelect = window.CSelect.getInstance(select);
      if (coreUISelect) {
        coreUISelect.setValue([]);
      }

      for (let i = 0; i < select.options.length; i++) {
        select.options[i].selected = false;
      }
      select.selectedIndex = 0;
    });

    document.getElementById('date-from').value = '';
    document.getElementById('date-to').value = '';
  });
});

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