layui 增强版select下拉框

2024-01-10 10:50:12

增强你的网站交互：为 layui 下拉框添加清除按钮

在网页开发中，下拉框是一个必不可少的元素，它允许用户从一系列选项中进行选择。layui 作为一款流行的 Web UI 组件库，提供了全面的下拉框组件。然而，默认的 layui 下拉框缺少一个清除按钮，这给用户带来了不便，他们需要手动输入内容后再删除。

痛点分析：

原生 select 下拉框缺少清除按钮，迫使用户手动清除选项。
layui 下拉框也没有清除按钮，用户需要手动添加。

解决方案：

使用 layui 提供的 close 图标样式。
通过 JavaScript 代码，在点击 close 图标时清空下拉框选项。
判断下拉框是否禁用，如果是，则不显示 close 图标。
判断下拉框是否已选择值，如果是，则显示 close 图标。

实现步骤：

在 HTML 代码中，将下拉框的 class 属性设置为 layui-select。
在 JavaScript 代码中，使用 layui.form.render() 方法初始化 layui 表单组件。
使用 layui.$(select).next().find('.layui-select-close') 获取下拉框的 close 图标元素。
使用 layui.$(select).next().find('.layui-select-close').on('click', function(){}) 为 close 图标元素添加点击事件监听器。
在点击事件监听器中，如果下拉框未选择值，则不执行任何操作。
如果下拉框已选择值，则清空下拉框选项。

代码示例：

layui.use('form', function(){
  var form = layui.form;
  form.render();
  
  // 获取所有下拉框
  var selects = document.querySelectorAll('.layui-select');
  
  // 为每个下拉框添加清除按钮
  selects.forEach(function(select){
    var closeIcon = select.querySelector('.layui-select-close');
    
    // 为清除按钮添加点击事件监听器
    closeIcon.addEventListener('click', function(){
      if (select.value) {
        select.value = '';
        form.render('select', select);
      }
    });
  });
});