# Layui多选下拉框

**Repository Path**: dreamson/layui-multiSelect

## Basic Information

- **Project Name**: Layui多选下拉框
- **Description**: 基于layui添加的一个多选下拉组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2018-11-05
- **Last Updated**: 2024-11-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Layui多选下拉框

#### 项目介绍
基于layui添加的一个多选下拉组件

#### 软件架构
本组件基于 Layui 的 form 组件源码修改而来


#### 安装教程

1. 引入layui
2. 增加 multiple 属性
    在您需要渲染为多选下拉框的 select 元素上增加 multiple 属性
    ``` 
    <select id="weekday" multiple lay-filter="weekday">
        <option value="1">星期一</option>
        <option value="2">星期二</option>
        <option value="3">星期三</option>
        <option value="4">星期四</option>
        <option value="5">星期五</option>
        <option value="6">星期六</option>
        <option value="7">星期日</option>
    </select>
    ```

3. 使用组件

    和 layui 其他扩展组件一样，使用 layui.extend 方法配置文件路径，然后再 use 一下即可
    ``` 
    layui.extend({
        multiple: './multiple'
    }).use(['multiSelect','form'], function () {
        var $ = layui.jquery, form = layui.form,
            multiple = layui.multiple;
    });
    ```

#### 使用说明
1. 渲染组件
    
    ```
    multiple.render();
    ```

    * 请注意：
    * layui 自带的 form 组件会将 select 元素渲染为单选下拉框，因此存在冲突，使用 multiple.render()重新渲染即可
    * 为避免 layui 组件升级问题，所以单独修改为一个扩展，并没有直接在源码里修改，只是选择一部分代码段拷贝出来进行修改的，因此存在冲突


2. 绑定事件做额外处理

    ``` 
    //weekday 为 该select 元素 lay-filter 的值
    multiple.on('mselect(weekday)', function (data) {
        //所点击的渲染后的元素
        console.log(data.elem)
        //已选中的值（数组格式）
        console.log(data.value)
        //已选中的文本（数组格式）
        console.log(data.text)
    });
    ```

3. 获取选中的值

    ``` 
    //直接使用 id 获取元素的 values 属性
    $('#weekday').attr('values');
    ```


#### 参与贡献

1. Fork 本项目
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request


#### 码云特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)