Select multiple options in dropdown HTML

A vanilla JavaScript multi-select plugin that transforms the normal multi-select element into a user-friendly tags input.

The users are allowed to select multiple options from the dropdown select. Click the ‘X’ button to remove the selected option.

In this tutorial, we are going to learn how to select multiple options in a dropdown list with JavaScript. Basically, we are going to make two buttons, one is a drop-down button in which we provide more than one option, and another is a normal button connected to the multiFunc() function with an id of the dropdown button, when we click this button then we are able to select multiple options in the drop-down button.

In this tutorial we are using two properties of JavaScript one is DOM property i.e. document.getElementById and another one is multiple properties use to choose more than one option at a time.

Syntax

Now let’s move to see the syntax to select multiple options in a dropdown list with JavaScript −

function multipleFunc() {
   document.getElementById("mySelect").multiple = true;
}

In the above syntax, we have gotten the function name “multipleFunc”. As the name suggests this function allows us to choose more than one option at a time. In this function, we use DOM using the id of a drop-down button with multiple properties and assign it to true. And this “multipleFunc” is connected to a normal button, so when we click on this button to activate the “multipleFunc” function to select more than one option in the dropdown button.

Algorithm

We have seen the syntax above to select multiple options in a dropdown list with JavaScript, now we are going to see the complete approach step by step −

• Step 1 − First, we create a form in which we create a drop−down button using a select tag of HTML with its own id, and in the select tag, we have to create more than one option in the body of the HTML code.

• Step 2 − In the form after the drop-down button, we create another button using the input tag with type, onclick, and value attributes which are connected to the “multiFunc” function using the onclick property to allow us to choose multiple options at a time in a drop-down button.

• Step 3 − In the button in the onclick attribute, we have to pass the multipleFunc which will call this function when we will click on this button.

• Step 4 − In the script tag, we have to define a multiFunc in which we have to use the DOM property of javascript i.e. document.getElementById in which we have to pass the id of the drop-down button.

• Step 5 − Then further in this, we use multiple properties of JavaScript and assign it true which helps the user to select more than one option at a time.

We have seen the syntax and algorithm to select multiple options in a dropdown list with JavaScript, now let’s take an example to implement the above-discussed steps.

Example

In this example, we will take a form with a dropdown button and a normal button connected to the multipleFunc, and then with the help of JavaScript properties we are able to select multiple options in a dropdown list.

   
   
   
   
   
   
      
   
   
Press CTRL and click the above button to select multiple options at once.
   

In the above code first, we create a form in which we create two buttons. First, is the dropdown button using the select tag of HTML with its own id, and second is normal using the input tag in which we pass type, onclick, and value. When we click the second button it is called the function “multiFunc”, it is connected by the onclick function. multiFunc is created to allow the user to choose multiple options at a time so in this function, we are using DOM property document.getElementById and id of the drop-down button with ‘multiple’ property and assign it to value ‘true’.

You can see the output images, in the first image option drop-down button and normal button but we are not able to select more than one option at a time in the drop-down button then we click on the select multiple options button we are able to select multiple options in the drop-down button as you can see in the second picture.

Conclusion

In this tutorial, we learned to select multiple options in a dropdown list with javascript. Further, we learned how to create a form with a dropdown button and normal button using input connected to the ‘multipleFunc’ function by onclick property in that function we are using the dom property of javascript “document.getElementById” and multiple properties of javascript which allow us to choose more than one option at a time.

A drop-down thus works as an alternative and in specific cases, a better option, as compared to radio buttons and checkboxes. Wait, what? Did we say an alternative to both radio buttons and checkboxes? But, it should have been just the radio button, shouldn’t it?

A radio button does not allow more than one selections and a checkbox, on the other hand, allows one or more than one selections. A user can select only one option from a drop-down list and therefore it resembles just the radio button in its functionality and not the checkboxes, right? Well, this is where the concept of multiple selections in a select box comes into play.

How can I allow users to select multiple options from a select box?

From a web designer’s perspective, allowing the user to choose multiple options from a select box is fairly simple and straightforward. We just need to add the “multiple” attribute to the <select> element. Now, in order to select multiple options, you have to add a size attribute also to the select element. This will make the select box look like a box rather than just the drop-down.

The user has to hold down the Ctrl key (in Windows) and Command key (on Mac) to select the choices.

<select name="Country" multiple size="5">
  <option value="USA">USA</option>
  <option value="Russia">Russia</option>
  <option value="India">India</option>
  <option value="Britain">Britain</option>
</select>

Note these points

• The “multiple” attribute is a Boolean attribute which when present, signifies that multiple options can be chosen.

• From a web designer’s perspective, the HTML code for single selections and multiple selections from a drop-down differs a little, however; from the end-user perspective, this difference is not visible on the webpage. The select box would not change its layout or styling in either case. Therefore, the user must be told how to select multiple options from the box.

• Given the point mentioned above, it is a better choice to pick checkboxes over multiple selections if the number of choices is less.

• The way to select multiple options from a drop-down differs from one operating system to another. While control button (Ctrl) is used for the selections in Windows, the command button does the trick in Mac systems.

Enhancing the Dropdown

As you can see, the native HTML select box is quite limited especially for choosing multiple options. This is where JavaScript and the highly effective libraries come into the fray. The select2 jQuery component gives the designer the power to customize the overall layout of the select box along with incorporating high utility options such as searching, dynamic loading, tagging, among others.

Does select2 support multiple selections?

Select2 supports multiple selections in drop-down list. To enable multiple selections, just include ‘multiple’ as an attribute.

The advantage here is that the user does not have to press Ctrl or Command key to select multiple options.

<script>
$(function()
{
  $(".js-example-basic-multiple").select2();
});
</script>
<select class="js-example-basic-multiple" multiple="multiple">
  <option value="US">United States</option>
  <option value="IND">India</option>
  <option value="GBR">Great Britain</option>
</select>

Select2 also adds other enhancements as well. For Example, in order to limit the number of choices the user can make, just add maximumSelectionLength in the Select2 options like this:

How do I select multiple options in a drop

How do I select multiple options from a drop