How to hide dropdown value in JavaScript?

Dropdown menus are fundamental parts of websites that enables users to select something from a variety of options. Sometimes, you may need to hide specific dropdown values based on particular conditions. In this blog post, we’ll explore how to use JavaScript to hide dropdown values quickly and easily.

How to hide dropdown value in JavaScript?

There are several ways to hide dropdown value in native HTML select tag. In the case when your dropdown looks similar to the code below.

<select>
	<option value="dog">Dog</div>
	<option value="cat">Cat</div>
	<option value="horse">Horse</div>
</select>

You can hide one of the values by picking it and updating its CSS rules in JavaScript.

document.querySelector('option[value="horse"]').style.display = "none";

From another hand, if you are sure, that you will not need it anymore, you can just remove this option.

document.querySelector('option[value="horse"]').remove();

How to hide dropdown values in jQuery?

If you are using jQuery you can even do this more quicker. Instead of modifying CSS styles by hand, you can use hide() method to do this (and next, you and use show() method to display this option again).

$('option[value="horse"]').hide()

In conclusion, there are several ways to hide the value of a dropdown list in JavaScript, depending on your specific needs, preferences, or libraries you are using.