CoreUI 多选表单数据重置

Question

我已经实现了用于多选的 coreui 库。我已阅读文档，但无法从所选字段重置。这是我的代码

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

  resetButton.addEventListener('click', function() {
    // Loop through each multi-select and reset its value

    multiSelects.forEach(select => {

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

      const coreUISelect = select.CoreUISelect; // Access the CoreUI instance
      if (coreUISelect) {
        coreUISelect.setValue([]); // Clear selected values using CoreUI API
      }
      // Update the placeholder (first disabled option)
      select.selectedIndex = 0; // Resets to the first option which is disabled
    });

    // Optionally reset the date fields
    document.getElementById('date-from').value = '';
    document.getElementById('date-to').value = '';
  });
});

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




<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>

Answer 1

const coreUISelect = select.CoreUISelect; // 访问CoreUI实例

这实际上并没有为您提供 MultiSelect 实例。

请改用以下内容，然后在实例上调用

deselectAll

方法：

  const coreUISelect = coreui.MultiSelect.getInstance(select); // Access the CoreUI instance
  if (coreUISelect) {
    coreUISelect.deselectAll(); // Clear selected values using CoreUI API
  }

下面的

// Update the placeholder

部分似乎没有必要。