How do I make a dropdown multi select?

Question

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:

 <select> <option>All</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> 

Answer 1

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.

Answer 2

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.