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-
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- <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 of the CSS style sheet created by us and inherits all the modifications from the stylesheet which we want to make in 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.
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 un select the selected options- we can simply click on the cross button near the text and the option will be automatically un selected and also the grey shade in the drop down menu has been removed