Dropdown lists and javascript

How to create a dropdown list using JavaScript?

We will learn to create a dropdown list using HTML and JavaScript below. Before starting with the article, let’s understand the dropdown list and why we need to use it.

The dropdown list gives multiple choices to users and allows them to select one value from all options. However, we can do the same thing using multiple radio buttons, but what if we have hundreds of choices? Then we can use the dropdown menu.

When users click the dropdown button, it opens all the choices, and users can select anyone. Also, the dropdown provides a better user experience than the radio button.

Use the and tags to create a dropdown list

The tag of HTML allows us to create a dropdown list. We can use the tag to add the options to the dropdown list.

Syntax

Users can follow the syntax below to create a dropdown menu using the and HTML tags.

 // add options here function selectOption()

In the above syntax, we are getting the index of the selected option using the selectedIndex property of the tag, and based on the index, we can get details of the option.

Example

In the example below, we have created the dropdown menu for car brands. Also, we have written the JavaScript code to get the selected value from the dropdown. The ‘onchange’ event will trigger whenever the user selects new values and invoke the selectOption() function.

Also, we have given some CSS styles to the default dropdown menu. Furthermore, we hide the dropdown menu’s arrow to improve it. In CSS, users can see how they can customize the default dropdown.

   
Using the select and option HTML tag to create a dropdown list in JavaScript
 
Choose any car from below dropdown list.
 BMW Range Rover Mercedes Honda city Verna Tata Safari  
 
The selected value is BMW.
    

Use the HTML tag to create a dropdown list

We can use normal HTML, CSS, and JavaScript to create a dropdown menu from scratch. We can use HTML to make dropdowns, CSS to style them properly, and JavaScript to add behavior.

Steps

Users can follow the steps below to create a dropdown menu using HTML, CSS, and JavaScript.

Step 1 − Create a div element for the dropdown title, and style it using CSS. We have created the div element with the ‘menu-dropdwon’ class.

Step 2 − Create a div element with the ‘dropdown-list’ class to add dropdown options.

Step 3 − Style the div with the class ‘dropdown-list’ and add options in the

tag format. Also, style the

HTML elements of the div.

Step 4 − Now, use JavaScript to add the behavior to our dropdown.

Step 5 − Add the onclick event on the div with the class name ‘menu-dropdwon’. Also, invoke the openDropdown() function when the user clicks the div.

Step 6 − In the openDropdown() function, access the div element with the class name ‘dropdown-list’ and show if it’s hidden or hides it if it is visible using the display property.

Step 7 − Now, add a click event to every

tag using JavaScript, and for that, use the for a loop.

Step 8 − Inside the callback function of the event listener, show the clicked element’s innerHTML in the output, and hide the dropdown menu by changing the display to none.

Example

In the example below, we followed the steps above to create a dropdown menu from scratch. In the output, users can observe that when they click on the dropdown title, it opens, and when they click again, it closes. Also, when they click on any option, it selects the option and renders it on display.

   .menu-dropdown < width: 10rem; height: 1.8rem; font-size: 1.5rem; background-color: aqua; color: black; border: 2px solid yellow; border-radius: 10px; padding: 2px 5px; text-align: center; justify-content: center; cursor: pointer; >.dropdown-list < display: none; z-index: 10; background-color: green; color: pink; font-size: 1.2rem; width: 10.5rem; border-radius: 10px; margin-top: 0rem; cursor: pointer; >.dropdown-list p < padding: 3px 10px; >.dropdown-list p:hover  
Using the div and p tag to create a dropdown list in JavaScript.
 
Choose any value from below dropdown list.
 
The selected value is none
 
  
Choose Value
 
First option
 
Second option
 
Third option
 
Fourth option
 
Fifth option
 
Sixth option
 
Seventh option
 
    

Users learned two different approaches to creating a dropdown menu. One uses the and tags which is the default select menu in HTML, and another uses only HTML, CSS< and JavaScript.

Источник

How TO — Clickable Dropdown

Learn how to create a clickable dropdown menu with CSS and JavaScript.

Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Create a Clickable Dropdown

Create a dropdown menu that appears when the user clicks on a button.

Step 1) Add HTML:

Example

Example Explained

Use any element to open the dropdown menu, e.g. a , or

element.

Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.

Wrap a element around the button and the to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example

/* Dropdown Button */
.dropbtn background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>

/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>

/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show

Example Explained

We have styled the dropdown button with a background-color, padding, hover effect, etc.

The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.

Step 3) Add JavaScript:

Example

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) if (!event.target.matches(‘.dropbtn’)) var dropdowns = document.getElementsByClassName(«dropdown-content»);
var i;
for (i = 0; i < dropdowns.length; i++) var openDropdown = dropdowns[i];
if (openDropdown.classList.contains(‘show’)) openDropdown.classList.remove(‘show’);
>
>
>
>

Источник

How to Create a Dropdown List Using JavaScript?

HTML and CSS are used to create stunning web pages, but when JavaScript is used in combination, the result is absolutely phenomenal. One really cool thing about a webpage is its drop-down lists. Now, there are many frameworks available on the internet that allow the user to use pre-built drop-down lists but knowing the fundamentals are important. This article will demonstrate how to create a basic drop-down list with the help of HTML, CSS, and JavaScript.

Step 1: Set up the HTML Document

Start by creating an HTML document and putting the following lines inside the HTML file:

Let’s explain what is going on over here:

• A parent is created with the id = “ddSection”, Later this div will be used to align its child elements in-line with it
• A button is created which calls the ButtonClicked() method upon click. This button will be used to show the drop-down list.
• After that, another div is created with the id “carMakes”, which is going to store a bunch of options inside it. This div will work like a container for the tags placed inside it.

Running the HTML document gives the following output to the browser:

As it is visible in the output, the items of the drop-down list are not in the correct spot. They should be:

• Hidden until the button is clicked
• Vertically inline with the button since it is a “Drop-down” list

So, let’s fix that in the next step

Step 2: Fixing the Drop-down List’s Items with CSS

To start, set the parent div’s (whose id is ddSection) display property to “inline-block”, also set its position to “relative”:

After that, add some styling to the button:

Style the container for the list items and set its display property to “none” so that it is hidden in the start:

And finally, style the list items, and set their display property to “none”, so they are also hidden in the start:

background-color : rgb ( 181 , 196 , 196 ) ;

The complete CSS code for this demonstration:

background-color : rgb ( 181 , 196 , 196 ) ;

Running the HTML now will create the following output on the browser:

The list items are now hidden, all there is left to do is to toggle their display property upon button press. Let’s do that in the next step.

Step 3: Toggling Display Property With JavaScript

In the JavaScript file, start by creating the function ButtonClicked(), which will be executed upon the press of the button:

// Upcoming lines of code belong here

In this function, get the reference of the div with id “carMakes” which is the container for the list items like:

After this, use the container variable to show and hide the drop down list with the help of if-else statement and the display property of the careMakes div:

if ( container. style . display === «none» ) {
container. style . display = «block» ;
} else {
container. style . display = «none» ;
}

The complete JavaScript code for this demonstration is as:

function ButtonClicked ( ) {
var container = document. getElementById ( «carMakes» ) ;
if ( container. style . display === «none» ) {
container. style . display = «block» ;
} else {
container. style . display = «none» ;
}
}

After this, simply run the HTML file on a browser and click on the button to show and hide the drop-down list:

And the drop-down list is working perfectly fine.

Conclusion

Drop-down list can be created with a combination of HTML, CSS, and JavaScript. Drop-down lists add to the aesthetics of the web page. To create a drop-down list, create the required elements in the HTML file. In the CSS file, style the elements and hide them using their display property. In the JavaScript file, toggle the display property upon button click. In this article, the creation of a drop-down list was explained step by step.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor’s degree in computer science.

Источник