How can I clear / reset a select field (that uses data-te-select-init)?

[DESIGNfromWITHIN]

I am using a select field #filterBrand as a product filter and added a 'reset filters' button.

My JS:
document.getElementById("filterBrand").selectedIndex = 0;

The code above only works when I don't use: data-te-select-init

How can I reset a data-te-select-init select field in a Javascript function?

[iprzybysz]

Hi, to achieve this, you need to use setValue() method.

Here is an example code:

<select id="filterBrand" data-te-select-init>
  <option value="0">Reset</option>
  <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>
</select>

<button
 id="btn-reset"
 type="button"
 class="ml-2 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
>
 Reset filters
</button>

// JS

// Initialization for ES Users
import { Select, initTE } from "tw-elements";

initTE({ Select });

const btnReset = document.querySelector("#btn-reset");
const mySelect = document.querySelector("#filterBrand");
const selectInstance = Select.getInstance(mySelect);

btnReset.addEventListener("click", () => {
  selectInstance.setValue("0");
});