​

<button type="button" class="btn btn-primary" id="clear-filter-input" data-mdb-ripple-init>Clear filter input</button>

​

<select data-mdb-select-init data-mdb-filter="true" id="clearFilterExample">

  <option value="1">One</option>

  <option value="2">Two</option>

  <option value="3">Three</option>

  <option value="4">Four</option>

  <option value="5">Five</option>

  <option value="6">Six</option>

  <option value="7">Seven</option>

  <option value="8">Eight</option>

  <option value="9">Nine</option>

  <option value="10">Ten</option>

</select>

​

​

​

const selectEl = document.querySelector('#clearFilterExample');

const selectInstance = mdb.Select.getInstance(selectEl);

​

const clearInputBtn = document.querySelector('#clear-filter-input');

clearInputBtn.addEventListener('click', () => {

  selectInstance.filterInput.value = "";

  selectInstance.filterInput.dispatchEvent(new Event('input'));

});

​

​