5

I'm trying to make a dropdown to be multi-select.

For example, I should be able to select Option 1, Option 2, Option 3, and Option 4 at the same time.

Just to make things more understandable. I'm attaching the desired result below:

enter image description here

<select>
  <option>All</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>
BillNathan
  • 589
  • 1
  • 6
  • 26
  • You need to search for such jQuery plugins to do that. It is not a primary feature provided by HTML. You can refer [here](https://www.jqueryscript.net/blog/Best-Multiple-Select-jQuery-Plugins.html) – Joykal Infotech Apr 24 '19 at 12:01
  • 2
    HTML5 has a select multiple paramater. If you want some quick styling just use bootstrap 4. This stack post shows how to quickly style it: https://stackoverflow.com/questions/50895806/bootstrap-4-multiselect-dropdown – Jens Ingels Apr 24 '19 at 12:41
  • Achieved with this answer. Cheers @JensIngels – BillNathan Apr 24 '19 at 16:19

2 Answers2

9

HTML has no such control.

A <select> element will render a dropdown menu that lets you pick one option.

A <select multiple> element will render a list box that lets you pick multiple options.

To get the UI you desire you will need to involve JavaScript. A good starting point would be a list of <input type="checkbox"> elements.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
8

You can use multiple as a property of select tag. It is a basic feature of HTML.

Here is an example : 

<select multiple>
  <option value="val1">Val1</option>
  <option value="val2">Val2</option>
  <option value="val3">Val3</option>
  <option value="val4">Val4</option>
</select>

Or you can use any jQuery plugins for the same.

Sachin
  • 169
  • 10
Nick
  • 565
  • 4
  • 19