How to select/deselect multiple options in dropdown using jQuery ?
Last Updated :
23 Jul, 2025
To select and deselect multiple options in a drop-down menu, we will use the HTML and CSS codes. HTML code helps to define the basic structure of the webpage and CSS will benefit in designing the web page.
Some essential properties used in the code are as follows-
- <div> - This is a division tag that helps us to define a particular section of the HTML code to be referred to and can be edited easily later in the CSS style sheet.
- <link rel="stylesheet" href="> - This tag contains the link to the CSS style sheet created by us and inherits all the modifications from the stylesheet which we want to make to our webpage.
- container-fluid - This class provides a full-width container that extends through the website.
- <div class="row"> - This is a bootstraps grid system and helps us to fill up to 12 rows across a page.
- mul-select - This class allows us to choose from the various options enlisted in the drop-down menu.
Approach: This is a simple HTML code to display a drop-down menu in a website where we can select multiple data-structures options and deselect others using the multi-select option.
We will be using Bootstrap here to use Bootstrap's responsive grid system and form control. Below is the code to include the Bootstrap CDN link in the head section of the HTML code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- These are the jQuery extensions taken from
bootstrap website to enable the drop down
function of the menu bar -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js">
</script>
<!-- Default bootstrap CSS link taken from the
bootstrap website-->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
<style>
*{
margin: 0; padding: 0; box-sizing: border-box;
}
body{
justify-content: center;
align-items: center;
min-height: 100%;
}
.form{
margin: 2% 20%;
}
.mul-select {
min-width: 100%;
}
h1 {
color: #fff;
}
</style>
</head>
<body>
<div class="container-fluid bg-dark" style="min-height: 50vh;">
<div class="text-center">
<h1 class="pt-4" style="color: #29c94f;">GeeksforGeeks</h1>
<h1 class="py-4">Select Multiple Options</h1>
</div>
<!-- These modifications are done to make the webpage
adaptive to the screen size and automatically
reduce the size when screen is minimized -->
<div class="row justify-content-center align-items-center">
<div class="col-lg-6 col-md-6 col-12">
<div class="form-group form">
<!-- Various options in drop down menu to
select the types of data structures
that we need -->
<select class="mul-select" multiple="true">
<option value="Stack">Stack</option>
<option value="Queue">Queue</option>
<option value="Linked-List">Linked-List</option>
<option value="Heap">Heap</option>
<option value="Binary-Tree">Binary-Tree</option>
<option value="Graph">Graph</option>
<option value="Array">Array</option>
</select>
</div>
</div>
</div>
</div>
<!-- JavaScript code to enable the drop down function -->
<script>
$(document).ready(function() {
$(".mul-select").select2({
placeholder: "select data-structures",
tags: true,
});
})
</script>
</body>
</html>
In the HTML code, we have also included some JavaScript codes because, in a web page, we have to use JavaScript for any type of function to be performed.
As we can see on opening the file in a browser this is the output obtained and we are getting the desired drop-down bar
This shows that we are able to select multiple options at a single time just by clicking on them. Apart from that, we can also observe that all the options which are chosen have been shaded as grey.
To unselect the selected options- we can simply click on the cross button near the text and the option will be automatically unselected also the grey shade in the drop-down menu has been removed. The following output gif demonstrates the same:
Source to download the Bootstrap, CSS and JavaScript extensions- https://getbootstrap.com/docs/4.5/getting-started/introduction/
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing