How to hide dropdown value in JavaScript

Dropdown values in JavaScript refer to the options that are available to select from a dropdown list or a select element in HTML. JavaScript can be used to manipulate the values of a dropdown list in various ways, including adding or removing options, pre-selecting options, or hiding/disabling certain options. Dropdown values are a fundamental aspect of web development that allows developers to create dynamic and user-friendly interfaces for their web applications.

HTML code

In HTML, a dropdown list is created using the <select> element with three <option> elements nested inside it. Each <option> element represents one option that the user can select from the dropdown list. The value of each option is defined using the value attribute of the <option> element.

In this code, we have a dropdown list with the id vehicles and the name of vehicles. The for attribute of the label element is used to associate the label with the dropdown list. Each option in the dropdown list is represented by an <option> element with a value attribute and a visible text label.

JavaScript code

In this code, we first get the dropdown list element using its id (vehicles) and store it in a variable called dropdown. We then use the querySelector method to get the specific option that we want to hide. In this case, we’re using the attribute selector [value='bike'] to select the option with the value of 'bike'.

Finally, we set the display style property of the optionToHide element to "none", which will hide it from the dropdown list.

Note: If you want to show the hidden option again, you can simply set its display style property back to block, inline, or any other valid display value depending on the context.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved