`<select multiple>` - how to allow only one item selected?

html

responsive-design

accessibility

javascript

byNikita Barsukov·Aug 22, 2024

Force single selection in a <select multiple> element by attaching a brief JavaScript snippet to its change event:

// Who let the users select multiple at once?! Not on my watch!
document.querySelector('#noDoubleDipping').addEventListener('change', (e) => {
  e.target.querySelectorAll('option').forEach(opt => opt.selected = false); // Sorry, but I can't let you do that, Dave.
  e.target.selectedOptions[0].selected = true; // There can be only one!
});

Now, use this magic combo in your HTML:

<select id="noDoubleDipping" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <!-- More options because variety is the spice of life -->
</select>

This handy trick keeps your selections in check by deselecting any additional selections, making sure only the freshest click gets the limelight.

Delving into the select tag

In a <select> tag with the multiple attribute, users can joyously select multiple options all at once. See it rocking in forms where users can flex their multitasking skills and choose several options without hitting submit after each selection.

Throw in the size attribute, and boom! You control the number of options displayed at a glance. Sans size, the dropdown will show only the first option, making the user click to unveil the rest.

Simplifying multi-select visuals: Single selection

If you want to show multiple options, but only let users select one, kick out multiple and keep size as your right-hand man. It creates a tidy list of single-selectable options:

<select id="cleanAndClear" size="3">
  <option value="1">Option A</option>
  <option value="2">Option B</option>
  <!-- More options because surprises are fun -->
</select>

Showing a trio of options together, users can pick their favorite, giving you a neater UI for any single-choice predicaments.

User-friendly juggling: Design and functionality

When implementing a form component, put on your user-empathy glasses. A selection list disguised as a multi-select but working as a single-select could toss users into the sea of confusion. Always strive to make it obvious — web elements should behave as they look, saving users from any unwanted surprises.

Sauce it up: Enhancements and covers

Smooth edge case coverage

Latest selection is the boss: A change event binding keeps selections dynamic.
No shortcut surprises: Overpower browser defaults to prevent CTRL-key multi-selections.

Pimp it up for better user experience

Highlight the star: Style the selected option to flaunt the user's choice.
Friendly hints: Guide users with clear instructions if your component defies the conventional.

Make it reachable to everyone

Take care of keyboard lovers: Make your element accessible with the tabIndex attribute.
Say it out loud: Use ARIA attributes like aria-label or aria-labelledby to make the function of the element clear to assistive technologies.

Level up with advanced tactics

Go replaceable with third-party libraries

Drop in a third-party library like jQuery UI's Selectmenu for a more customizable select dropdown. It can imitate this behavior without the need for extra JavaScript.

Start simple and enhance progressively

Start with a basic <select> sans multiple attribute. Then, let JavaScript boost this functionality based on the browser capabilities and user requirements.

explain-codes / Html / <select multiple> - how to allow only one item selected?

Linked

Adding options to a <select> using jQuery?



How to implement "select all" check box in HTML?



Set the select option as blank as default in HTML select element



How to add Drop-Down list (<select>) programmatically?



".addeventlistener is not a function" why does this error occur?

