一分钟快速掌握原生JS下拉多选框制作方法

2023-02-06 15:51:15

原生 JavaScript 下拉多选框组件：创建交互式多选列表

在前端开发中，下拉多选框组件是一种必不可少的工具，它允许用户从一系列选项中选择多个值。使用原生 JavaScript 创建这种组件可以带来诸多好处，包括易用性、兼容性和自定义能力。

理解原生 JavaScript 下拉多选框

原生 JavaScript 下拉多选框组件，顾名思义，是使用纯 JavaScript 创建的，而无需依赖库或框架。它由一个带有 multiple 属性的 <select> 元素组成，该属性允许用户进行多项选择。子元素是一组 <option> 元素，每个元素都包含一个可供用户选择的选项。

如何实现原生 JavaScript 下拉多选框

创建 <select> 元素 ：<select multiple> 创建一个支持多选的下拉列表。
添加 <option> 子元素 ：使用带有 value 属性的 <option> 元素填充列表，该属性定义每个选项的值。
添加 onchange 事件监听器 ：在 <select> 元素上添加一个 onchange 事件监听器，以在用户选择选项时触发。
处理所选选项 ：在 onchange 事件处理程序中，可以获取所选选项，对其值进行处理（例如存储在数组中）或将其提交到服务器。

原生 JavaScript 下拉多选框的优点

易于使用 ：原生 JavaScript 组件相对简单，易于理解和实现。
兼容性强 ：由于它是使用原生 JavaScript 创建的，因此它与所有主要浏览器兼容。
高度可定制 ：可以根据您的特定要求轻松自定义组件的样式和行为。
性能卓越 ：原生 JavaScript 组件轻巧且高效，不会显著影响网页性能。

代码示例

以下是一个使用原生 JavaScript 实现下拉多选框组件的简单代码示例：

<select multiple>
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
  <option value="3">选项 3</option>
</select>

const select = document.querySelector('select');

select.addEventListener('change', (event) => {
  const selectedOptions = Array.from(event.target.selectedOptions);
  const selectedValues = selectedOptions.map(option => option.value);

  console.log(selectedValues);
});