LuLu UI Edge版中文文档 » Select下拉框
文档 Github➹

Select下拉框

安装与调用

引入CSS：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Select/index.css">

模拟下拉选择效果还需要引入 JS：

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Select/index.js"></script>

也可采用如下方式进行引用

<script type="module">
    import "https://qidian.gtimg.com/lulu/hope/ui/Select/index.js";
</script>

原生下拉效果

给 <select> 选择框添加 is="ui-select" 即可。

<select is="ui-select">
    <option>选项</option>
</select>

例如下面这个演示效果，演示了禁用态，默认选中，以及动态赋值。

<button id="bm" class="ui-button" type="primary">第二个选项选中</button>
<select id="sel" is="ui-select">
                        <option value="1" disabled>选项1</option>
                        <option value="2">选项2</option>
                        <option value="3">选项3</option>
                        <option value="4" selected>选项4</option>
                        <option value="5">选项5</option>
                        <option value="6">选项6</option>
                    </select>
bm.addEventListener('click', function () {
        sel[1].selected = true;
    });

原生无边框下拉框

在列表中，下拉框往往以无边框的形式存在，此时，可以通过设置 border="none" 实现相关的效果。

<select is="ui-select" border="none"></select>
 
<form class="ui-list">
    <ui-list-item active="select">
        <select is="ui-select" border="none">
            <option value="tel">手机号登录</option>
            <option value="name">昵称登录</option>
            <option value="email">邮箱登录</option>
        </select>
    </ui-list-item>
    <ui-list-item active="select, input">
        <select is="ui-select" border="none" width="6rem">
            <option>+86</option>
            <option>+80</option>
            <option>+84</option>
            <option>+87</option>
        </select>
        <input type="tel" is="ui-input" border="none" flex="1" value="13208033621">
    </ui-list-item>
</form>

图标自定义

设置 arrow="right" 可以让图标朝右显示。

<select is="ui-select" border="none" arrow="right"></select>

使用 CSS 变量 --ui-select-arrow 可以自定义图标样式。

<select class="select-my" is="ui-select" border="none">
    <option>选项1</option>
    <option>选项2</option>
</select>
.select-my {
    --ui-select-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M482.133 738.133l-345.6-345.6c-17.066-17.066-17.066-42.666 0-59.733 8.534-8.533 19.2-12.8 29.867-12.8h689.067c23.466 0 42.666 19.2 42.666 42.667 0 10.666-4.266 21.333-12.8 29.866l-343.466 345.6c-17.067 17.067-42.667 17.067-59.734 0z'/%3E%3C/svg%3E");
}

模拟下拉框

模拟下拉框通过给 <select is="ui-select"> 元素设置 popup 属性实现。

<select is="ui-select" popup></select>

此效果需要依赖 Layout/index.css，如果已经引入了 ui.css，则忽略此 CSS 引入。

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Layout/index.css">
<select is="ui-select" popup></select>
<select is="ui-select" popup>
    <option>请选择</option>
    <option>选项1</option>
    <option>选项2</option>
</select>

分组

支持 <optgroup> 元素分组。

<select is="ui-select">
  <optgroup label="分组1">
    <option>选项 1.1</option>
  </optgroup>
  <optgroup label="分组2">
    <option>选项 2.1</option>
    <option>选项 2.2</option>
  </optgroup>
  <optgroup label="分组3" disabled>
    <option>选项 3.1</option>
    <option>选项 3.2</option>
    <option>选项 3.3</option>
  </optgroup>
</select>

如果没有 <optgroup> 元素设置 label 描述，则分组使用分隔线分割。

<select is="ui-select">
  <optgroup>
    <option>选项 1.1</option>
  </optgroup>
  <optgroup>
    <option>选项 2.1</option>
    <option disabled>选项 2.2</option>
  </optgroup>
  <optgroup>
    <option>选项 3.1</option>
    <option>选项 3.2</option>
    <option>选项 3.3</option>
  </optgroup>
</select>

无边框自由模拟

可以用在搜索筛选场景。

<select is="ui-select" border="none" popup arrow="right" width="auto" required>
    <option value="">默认排序</option>
    <option value="time">按更新</option>
    <option value="hot">按畅销</option>
</select>

占位符文字灰色显示的技巧在于，对应的 <options> 选项的 value 值设置为空字符，同时给 <select> 元素设置 required 属性。

任意元素自由模拟

通过 trigger 属性指定触发弹出层元素可以实现任意元素模拟下拉选择的效果，其中 trigger 属性值是对应点击元素的 id 属性值。

<button id="somId">标签筛选</button>
<select is="ui-select" trigger="someId" popup></select>

设置了 trigger 属性的下拉元素会隐藏，以及支持多选（使用原生的 multiple 属性）。

（支持多选） 
<button id="fb" arrow="down">标签筛选</button> <span class="gray">（支持多选）</span>
<select is="ui-select" trigger="fb" popup multiple>
    <option value="-1">全部</option>
    <option value="1">女强</option>
    <option value="2">穿越</option>
    <option value="3">甜宠</option>
    <option value="4" disabled>男神</option>
    <option value="5">腹黑</option>
    <option value="6">爽文</option>
    <option value="7">逆袭</option>
</select>

多选效果依赖 Button 按钮 和 Hr 分隔线样式。

语法和参数

语法

无语法，HTML 驱动。

参数

方法名 释义
popup 是否使用弹出层进行模拟
multiple 是否支持多选
trigger 使用任意元素自定义模拟

只读属性

{
    // 是否和页面建立了联系，布尔值
    isConnectedCallback: false,
    // 关联元素
    element: {
        trigger: null,
        popup: null
    }
}

赋值

如需手动改变 <select> 元素的选中项，可以这么处理：

  • 使用 value 赋值。 
    select.value = 'xxx';

    'xxx' 是希望被选中的 <option> 元素的 value 属性值。

    多选模式下，支持多个值同时赋值，使用英文逗号分隔。

    select.value = 'valueA,valueB';
  • 找到对应的 <option> 元素，然后设置 selected 属性值为 true。 
    select.options[1].selected = true;
  • 使用 selectedIndex 属性实现选中。 
    select.selectedIndex = 1;

事件处理

方法名 释义
connected 自定义元素进入文档时候触发
change 下拉框选中项变化的时候触发

例如：

select.addEventListener('change', function () {
    console.log('来自下拉框：我变化了');
});

禁用、出错与动态支持

元素禁用

给 <select> 元素添加 disabled 属性即可。

<select is="ui-select" disabled></select>

元素出错

添加 is-error 属性。

<select is="ui-select" is-error></select>

元素动态添加和删除

测试下动态匹配。

bi.addEventListener('click', function () {
    x0.insertAdjacentHTML('beforeend', '<select is="ui-select" popup><option>我是动态插入的</option></select> ');
});
ba.addEventListener('click', function () {
    document.querySelectorAll('#x0 select').forEach(function (select) {
        const option = document.createElement('option');
        option.text = '我是新添加的';
        option.selected = true;
        // 添加该 option 元素到最前面
        select.add(option, 0);
    });
});
 
// 删除整个下拉元素
button.addEventListener('click', function () {
    select.remove();
});
// 删除第1个 option 元素
button.addEventListener('click', function () {
    select.remove(0);
});
本页贡献者：

zhangxinxu