Working with Checkboxes, Radio Buttons, and Dropdowns

const select = document.querySelector('select');
select.value = select.querySelector('option[data-default="true"]')?.value || '';

Clearing the selection
Setting a random option
Setting a data-driven default option
This pattern sets a default selection based on a data attribute rather than relying on option order or hardcoded values. Benefits include: 1) Declarative way to specify defaults through HTML, 2) Maintains separation of concerns - default selection logic in HTML, not JavaScript, 3) Fallback to empty string if no default is specified, 4) Works with dynamically loaded options, 5) Easy to change default through HTML without updating JavaScript. This is particularly useful in applications where default selections might change based on user preferences or other conditions.
Validating the select element