js实现省份下拉菜单效果-JavaScript中文网-JavaScript教程资源分享门户

在网页开发中，下拉菜单是非常常见的交互组件。本文将介绍如何使用JavaScript实现一个省份下拉菜单，并探讨其中的实现细节和相关知识点。

实现步骤

准备数据源

我们需要先准备省份数据作为我们下拉菜单的选项。这里可以使用一个数组来存储每个省份的名称、简称、行政区划代码等信息。以下是一个简单的数据样例：
```
const provinces = [
  { name: '北京市', shortName: '北京', code: '110000' },
  { name: '上海市', shortName: '上海', code: '310000' },
  // ...
];
```

构建下拉菜单

我们可以通过HTML和CSS构建出基本的下拉菜单结构，并在JavaScript中动态地添加选项。以下是一个示例的HTML结构：

<div class="dropdown">
  <button class="dropdown-toggle" type="button">请选择省份</button>
  <ul class="dropdown-menu"></ul>
</div>

在JavaScript中，我们可以通过遍历省份数据并创建<li>元素来动态地添加选项到下拉菜单中：

const dropdownMenu = document.querySelector('.dropdown-menu');
provinces.forEach((province) => {
  const option = document.createElement('li');
  option.textContent = province.name;
  dropdownMenu.appendChild(option);
});

实现下拉菜单的交互效果

我们需要实现以下功能：
- 点击下拉菜单按钮时，展开或隐藏下拉菜单选项；
- 选择一个省份后，将其名称显示在下拉菜单按钮上，并收起下拉菜单。
我们可以使用事件监听器来实现这些交互效果。以下是对应的JavaScript代码：
```
-- -------------------- ---- -------
----- -------------- - -------------------------------------------
---------------------------------------- -- -- -
  --------------------------------------
---

-------------------------------------- ------- -- -
  -- ---------------------- --- ----- -
    -------------------------- - -------------------------
    --------------------------------------
  -
---
```
在点击下拉菜单按钮时，我们通过添加/移除show类名来控制下拉菜单的显示状态。在点击下拉菜单选项时，我们将选中的省份名称设置为下拉菜单按钮的文本内容，并隐藏下拉菜单。

实现细节和相关知识点

动态创建元素

在动态创建下拉菜单选项时，我们使用了document.createElement()方法和textContent属性。这些都是常见的DOM操作方法和属性。

const option = document.createElement('li');
option.textContent = province.name;

事件委托

在处理下拉菜单的点击事件时，我们使用了事件委托的方式。具体来说，是将click事件监听器添加到下拉菜单的父元素上，并通过event.target属性获取到被点击的选项元素。

dropdownMenu.addEventListener('click', (event) => {
  if (event.target.nodeName === 'LI') {
    dropdownToggle.textContent = event.target.textContent;
    dropdownMenu.classList.remove('show');
  }
});

这种方式可以避免给每个选项都添加事件监听器带来的性能问题，也方便后期维护。

CSS媒体查询

我们可以使用CSS媒体查询来为不同屏幕宽度下的设备提供不同的样式。例如，可以为小屏幕设备隐藏下拉菜单的按钮，并在需要时展示一个自定义的选择框。

@media screen and (max-width: 768px) {
  .dropdown-toggle

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/2112) ，转载请注明来源
[https://www.javascriptcn.com/post/2112](https://www.javascriptcn.com/post/2112)