How to create a drop-down menu in JavaScript

How to make a drop-down menu with JavaScript: 1. Use the value attribute to get the options of the drop-down menu; 2. Determine the status of the div based on the options; 3. Use the style.display style to hide or display the div.

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

How to create a drop-down menu with JavaScript?

js drop-down menu production

1. Use js to hide and display divs through drop-down menus

Idea: Use the value attribute Get the options of the drop-down menu → determine the status of the div based on the options → use the style.display style to hide or show the div. An example demonstration is as follows:

Code

      
   显示 隐藏  
我是一个div么呀我是一个div
   

Effect demonstration

## 2. How to use js to display a drop-down menu when the mouse slides over it

The general idea is as follows: first set the width and height of the menu box and add position: relative; then set the same width and height for the content inside; then add absolute positioning of width to the drop-down secondary menu inside.

       
  
 
 下拉 
 
下拉1
 
下拉2
 
下拉3
 
下拉4
 
 
 
   

Recommended study: "

javascript Advanced Tutorial"

The above is the detailed content of How to create a drop-down menu in JavaScript. For more information, please follow other related articles on the PHP Chinese website!