layui下拉选择器

示例：

演示地址：演示地址

1.单选

示例1

多选

示例2

介绍：

基于layui.tree的树形下拉选择组件，支持单选和多选，目前为输入框触发下拉事件，已选值将填入到input中。

用法：

layui.use(['customSelect'], function() {
    const select = layui.customSelect
    select.render({
        el: 'example',
        data: list,
        checkbox: true,
        checked: function (obj) {
            
        }
    })
})

参数：

参数名	描述	默认值	说明
el	layui下拉选择器的根节点dom的id	必填
data	下拉树的数据	必填，每项数据须有title/name/text之一	树形多维数据或一维数组，参照layui.tree
type	类型	null	若是单选类型，值为'radio'
line	连接线	true	参照layui.tree
accordion	是否开启手风琴模式	false	参照layui.tree
checked	回调函数	function	下面有说明

根节点DOM示例：

  <input autocomplete="off" id="example" type="text" class="layui-input" placeholder="快速查找" />

数据示例（data）：

title: '江西',
    id: 1,
    children: [{
        title: '南昌',
        id: 2,
        children: [{
            title: '高新区', //三级菜单
            id: 3,
            children: [{
                title: '12121', //三级菜单
                id: 9
            }]
            //…… //以此类推，可无限层级
        }]
    }]
}, {
    title: '陕西', //一级菜单
    id: 4,
    children: [{
        title: '西安', //二级菜单
        id: 5
    }]
}]

回调：

checked: function(obj, checkedDatas, {values, idents, datas}) {
  // 返回一个对象，有以下三个成员
  // 1、obj 点击某个复选框时的数据、选中状态和dom元素
  // 2、checkedDatas 每次点击复选框时的已被选中数据，单选时为[null]
  // 3、Object {
    // vaule 所有选中数据的title
    // idents 所有选中数据的id
    // datas 所有的选中数据
    // 三个数据都是一维数组
  }
}

更新

2021-4-16 使用input作为节点，传入input的节点ID即可

Yunter丶 / customSelect

layui下拉选择器

示例：

介绍：

用法：

参数：

根节点DOM示例：

数据示例（data）：

回调：

更新

简介

发行版

贡献者

近期动态

Yunter丶 / customSelect .gitee-modal { width: 500px !important; }

layui下拉选择器

示例：

介绍：

用法：

参数：

根节点DOM示例：

数据示例（data）：

回调：

更新

简介

发行版

贡献者

近期动态

搜索帮助

Yunter丶 / customSelect