Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to select multiple options in a dropdown list with JavaScript?
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.
<!DOCTYPE html> <html> <body> <form id="myForm"> <select id="mySelect"> <option>One</option> <option>Two</option> <option>Three</option> </select> <input type="button" onclick="multipleFunc()" value="Select multiple options"> </form> <p>Press CTRL and click the above button to select multiple options at once.</p> <script> function multipleFunc() { document.getElementById("mySelect").multiple = true; } </script> </body> </html>
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.
10K+ Views
