当前位置：首页 > 行业动态 > 正文

如何使用CSS、DIV和JS实现自定义下拉框？

admin
行业动态
2025-01-25
3260

### ，，用CSS、DIV和JS实现下拉框：通过CSS设置样式，用DIV和UL、LI模拟下拉框结构，借助JS添加交互功能，如点击显示隐藏、动态更新选项等，可创建美观实用的自定义下拉框。

在网页开发中，使用 CSS、DIV 和 JavaScript 实现下拉框是一种常见的需求，以下是详细的实现步骤：

如何使用CSS、DIV和JS实现自定义下拉框？第1张

1、HTML结构

创建一个包含下拉框的基本 HTML 结构，通常包括一个用于显示选中值的输入框和一个隐藏的下拉列表。

 <div >
   <input type="text"  readonly>
   <ul >
     <li >Option 1</li>
     <li >Option 2</li>
     <li >Option 3</li>
   </ul>
 </div>

2、CSS样式

使用 CSS 来设置下拉框的样式，包括隐藏下拉列表、设置输入框和列表项的样式等。

 .select-box {
   position: relative;
   display: inline-block;
 }
 .selected-value {
   padding: 5px;
   border: 1px solid #ccc;
   width: 100%;
   cursor: pointer;
 }
 .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background-color: white;
   border: 1px solid #ccc;
   display: none;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 .dropdown-menu li {
   padding: 5px;
   cursor: pointer;
 }
 .dropdown-menu li:hover {
   background-color: #f0f0f0;
 }

3、JavaScript功能

使用 JavaScript 来实现下拉框的交互功能，如点击输入框时显示下拉列表，点击列表项时更新输入框的值并隐藏下拉列表。

 const selectBox = document.querySelector('.select-box');
 const selectedValue = document.querySelector('.selected-value');
 const dropdownMenu = document.querySelector('.dropdown-menu');
 const listItems = document.querySelectorAll('.dropdown-menu li');
 let isOpen = false;
 selectedValue.addEventListener('click', () => {
   if (isOpen) {
     dropdownMenu.style.display = 'none';
   } else {
     dropdownMenu.style.display = 'block';
   }
   isOpen = !isOpen;
 });
 listItems.forEach(item => {
   item.addEventListener('click', () => {
     selectedValue.value = item.textContent;
     dropdownMenu.style.display = 'none';
     isOpen = false;
   });
 });

4、示例代码整合

将上述 HTML、CSS 和 JavaScript 代码整合在一起，形成一个完整的下拉框组件。

完整代码如下：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>下拉框示例</title>
   <style>
     .select-box {
       position: relative;
       display: inline-block;
     }
     .selected-value {
       padding: 5px;
       border: 1px solid #ccc;
       width: 100%;
       cursor: pointer;
     }
     .dropdown-menu {
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       background-color: white;
       border: 1px solid #ccc;
       display: none;
       list-style: none;
       margin: 0;
       padding: 0;
     }
     .dropdown-menu li {
       padding: 5px;
       cursor: pointer;
     }
     .dropdown-menu li:hover {
       background-color: #f0f0f0;
     }
   </style>
 </head>
 <body>
   <div >
     <input type="text"  readonly>
     <ul >
       <li >Option 1</li>
       <li >Option 2</li>
       <li >Option 3</li>
     </ul>
   </div>
   <script>
     const selectBox = document.querySelector('.select-box');
     const selectedValue = document.querySelector('.selected-value');
     const dropdownMenu = document.querySelector('.dropdown-menu');
     const listItems = document.querySelectorAll('.dropdown-menu li');
     let isOpen = false;
     selectedValue.addEventListener('click', () => {
       if (isOpen) {
         dropdownMenu.style.display = 'none';
       } else {
         dropdownMenu.style.display = 'block';
       }
       isOpen = !isOpen;
     });
     listItems.forEach(item => {
       item.addEventListener('click', () => {
         selectedValue.value = item.textContent;
         dropdownMenu.style.display = 'none';
         isOpen = false;
       });
     });
   </script>
 </body>
 </html>

FAQs

1、如何更改下拉框的样式？

可以通过修改 CSS 部分的样式属性来更改下拉框的外观，如字体颜色、边框颜色、背景颜色等，还可以添加更多的 CSS 类或 ID 来进一步定制样式。

2、如何动态添加选项到下拉框？

可以使用 JavaScript 动态创建<li> 元素并将其添加到<ul> 元素中。const newOption = document.createElement('li'); newOption.textContent = 'New Option'; dropdownMenu.appendChild(newOption);。