How to select/deselect multiple options in dropdown using jQuery

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.

Example :

<!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>

Leave a comment Cancel reply