Kodeclik Logo

Our Programs

Courses

Gifting

Learn More

Schedule

Kodeclik Blog

Hiding Dropdown Values in Javascript

We will learn how to create interactive menus in Javascript so one selection causes dropdown values to be hidden. To understand how to do this, we will write and embed our Javascript code inside a HTML page like so:

In the above HTML page you see the basic elements of the page like the head element containing the title (“Hiding Dropdown Values in Javascript”) and a body with an empty script tag. Any HTML markup goes inside the body tags and any Javascript code goes inside the script tags.

Creating your first menu

Let us create a page that allows users to customize their pizza. We will create a basic webpage that allows you to choose the size and type of pizza. First, let us create a menu for the size of the pizza:

This looks like:

Javascript Hiding Dropdown Values in Menus

Pulling down the dropdown menu looks like:

Javascript Hiding Dropdown Values in Menus

Creating your second menu

Let us now add another dropdown menu this time to select the pizza topping:

This enables us to make two selections: one for the size and one for the topping. Note that for the second menu we use ids for each option element so that we can refer to them and hide them as necessary based on the options chosen for the first menu. This page renders as:

Javascript Hiding Dropdown Values in Menus

Hiding dropdown values

Now let us suppose the only small pizzas available are veggie pizzas and that the only large pizzas are pepperoni pizzas. Medium pizzas come in veggie and cheese options but not pepperoni. We seek to incorporate these dependencies so that selection of size should automatically hide dropdown values in the pizza topping that are not applicable.

This means that whenever there is a change detected in the first menu, either selection of one of the three size choices or the unselection (denoted by the first choice of blank) we must update the options in the second menu. We update the first select menu to have an “onchange” element which is set to the function “sizeselected()”. Note that this function does not take any arguments but merely is invoked whenever there is a change. The actual change can be detected inside the sizeselected() function script.

In the above code, inside the sizeselected() function we first use the getElementById() method to extract the first element and then the .value attribute to find its value. This will give the size that the user has actually selected. Then we have a set of if..else statements. Based on the value of the size, we update the elements in the second menu. Inside each of these collection of statements we use the getElementById() to refer to the specific topping choices. Here we use “style.display = ‘inline’” to display the menu choice and “style.display = ‘none’” to hide it, as the case may be. Finally, observe that there is a fallback option where all the choices are displayed and no choices are hidden.

Here is an example of trying this code with the “large” option chosen for the size menu. As we see only one option for the topping is available, namely “pepperoni”.

Javascript Hiding Dropdown Values in Menus

Caveats: Note that the code above only works in one direction. If you choose the topping first, the size option does not get updated. We will leave it as an exercise for the reader to update the code to make it work in the other direction.

This code above can get complicated as the options increase. In such a case, it is better to use a systematic approach like an array to store the options and constraints and use lookups to update the options as the user interacts with the menus.

If you liked this blogpost, learn how to get values of buttons in Javascript.

Want to learn Javascript with us? Sign up for 1:1 or small group classes.

Kodeclik sidebar newsletter

Join our mailing list

Subscribe to get updates about our classes, camps, coupons, and more.

About

Kodeclik is an online coding academy for kids and teens to learn real world programming. Kids are introduced to coding in a fun and exciting way and are challeged to higher levels with engaging, high quality content.

Copyright @ Kodeclik 2024. All rights reserved.