worse-select

<select>
  <option value="" disabled selected>Choose one</option>
  <option value="ford">Ford</option>
  <option value="honda">Honda</option>
  ...
</select>

The placeholder clears when the dropdown opens and reappears when it closes without a selection.

<select data-searchable="true">
  <option value="" disabled selected>
    Choose a country
  </option>
  <option>Australia</option>
  <option>Canada</option>
  ...
</select>

Matches are highlighted. Screen readers receive a live announcement of the result count.

<select disabled>
  <option selected>North America</option>
  <option>Europe</option>
  <option>Asia Pacific</option>
</select>

Native disabled attribute. No widget-specific API needed.

<select size="6" data-searchable="true">
  <option>Critical</option>
  <option>High</option>
  <option>Medium</option>
  ...
</select>

size > 1 triggers listbox mode — the native attribute stays native.

<select multiple size="8"
        data-searchable="true">
  <option>Delaware</option>
  <option>Maryland</option>
  ...
</select>

multiple stays native. Space or Enter toggles individual options.

const select = document.querySelector('select');

// Add
const opt = document.createElement('option');
opt.textContent = 'Delta';
select.appendChild(opt);

// Remove
select.remove(select.options.length - 1);

A MutationObserver keeps the widget in sync — no manual refresh call needed.