返回

下拉框修炼魔法：实现多选搜索，点亮动态效果！

前端

原生 JavaScript 中的下拉框多选与搜索：释放无限可能

Step 1：HTML 构建 - 打造基础

想要创建下拉框，我们从一个 <select> 标签开始。它将呈现选项并允许用户进行选择。

<select id="my-select">
  <option value="option-1">选项 1</option>
  <option value="option-2">选项 2</option>
  <option value="option-3">选项 3</option>
</select>

别忘了，你可以根据需要修改下拉框的 ID “my-select”。

Step 2：注入 JavaScript - 赋予活力

接下来，我们使用 JavaScript 赋予下拉框生命！我们将实现多选和搜索功能，让它更强大。

// 获取下拉框元素
const selectElement = document.getElementById('my-select');

// 启用多选
selectElement.setAttribute('multiple', true);

// 搜索功能
const searchInput = document.createElement('input');
searchInput.setAttribute('type', 'text');
searchInput.setAttribute('placeholder', '搜索...');
searchInput.addEventListener('input', (event) => {
  const searchTerm = event.target.value.toLowerCase();
  const options = selectElement.querySelectorAll('option');
  options.forEach((option) => {
    const optionText = option.textContent.toLowerCase();
    if (optionText.indexOf(searchTerm) === -1) {
      option.style.display = 'none';
    } else {
      option.style.display = 'block';
    }
  });
});

// 插入搜索框
selectElement.insertBefore(searchInput, selectElement.firstChild);

太棒了！现在我们有了原生 JavaScript 的多选搜索下拉框，它既实用又强大。

深入理解：拆解技术

  • 多选： 允许用户选择多个选项。这是通过将 multiple 属性添加到 <select> 标签来实现的。
  • 搜索： 使用输入框过滤选项。当用户输入时，脚本会实时隐藏或显示选项。
  • 原生 JavaScript： 我们仅使用 JavaScript 和 HTML，没有任何外部库或框架。这确保了代码的轻量级和性能优化。

解锁无限可能：用例

这个下拉框的多选和搜索功能在各种场景下非常有用：

  • 表单收集：允许用户选择多个选项或搜索特定答案。
  • 产品过滤器：帮助用户缩小搜索范围，快速找到所需商品。
  • 内容导航：提供一种简单的方式来浏览多层级信息或目录。
  • 个性化体验：让用户轻松选择感兴趣的主题或定制他们的体验。

常见问题解答：你的疑惑解答

1. 我可以在移动设备上使用它吗？

是的！这个下拉框响应式且在移动设备上运行良好。

2. 我可以自定义外观吗？

当然可以！你可以使用 CSS 轻松地自定义下拉框的外观，以匹配你的网站设计。

3. 如何在选项被选择时触发事件？

你可以使用 onchange 事件监听器来在选项被选择时触发自定义操作。

4. 我可以添加新选项吗？

没问题！使用 JavaScript 的 appendChild() 方法，你可以动态添加新选项。

5. 如何在下拉框中禁用特定选项？

只需将 disabled 属性添加到要禁用的选项即可。

结语：探索 JavaScript 的力量

通过创建原生 JavaScript 的下拉框多选和搜索功能，你已经见证了纯代码的强大魅力。它不仅轻量且高效，还为你提供了无限的可能性。拥抱 JavaScript 的力量，解锁你网页设计的无限潜力！