Layui 自定义下拉选组件

Layui 自定义下拉选组件

基于layui，仿照easyui的combobox做的下拉选。可通过接口获取下拉选值，显示的文本，传值内容可自定义生成。
可绑定选中事件，可做多级联动。
定义常用工具模块common.js，并加载到layui的默认模块中去。
layui.js

u={
	common:'../../utils/common',
}

common.js

layui.define(['form','laydate','carousel','util'],function (e) {
	const {form,laydate,carousel,util}=layui;
	e('common',{
        /**
         * 生成下拉选
         * @param config：参数
         *          id：dom的id
         * 				string：单个dom
         * 				Array：多个dom
         *          url：获取地址
         *          value：<option>的value名
         *          text：<option>text
         * 			getValue：自定义传输值
         * 			getText：自定义显示文本
         *          param：url请求的额外参数
         *          initData：默认option
         *			link：需要联动的下拉选的dom id
         *			select：选中事件
         *	@return <option/>文本
         */
		getSelect(config){
			let f={
                    id:undefined,
                    url:undefined,
                    value:'value',
                    text:'text',
                    getValue:function(v){return v[this.value]},
                    getText:function(t){return t[this.text]},
                    param:{},
                    initData:[{value:'',text:'请选择'}],
                    link:false,
                    select:false,
                    data:[],
                    ...config
                    },
                that=this,
                isArray=Array.isArray(f.id);
            if(isArray){
                f.id.forEach(id=>{
                    $("#"+id).attr("lay-filter",'commonSelect'+id);
                })
            }else{
                $("#"+f.id).attr("lay-filter",'commonSelect'+f.id);
            }
            if(f.link){
            	//获取父下拉选的事件集
                const fns=layui.cache.event['form.select']['commonSelect'+f.link]||[function(){}]
                form.on('select(commonSelect'+f.link+')',function (data) {
                    fns.forEach(fn=>{
                        fn.call(this,data)
                    })
                    //默认第一个参数值为父下拉选的选中值
                    for(let k in f.param){
                        f.param[k]=data.value;
                        break;
                    }
                    f.link=false;
                    getOptions();
                })
            }
            //绑定选中事件
            if(f.select){
                if(isArray){
                    f.id.forEach(id=>{
                        form.on('select(commonSelect'+id+')',function (data) {
                            f.select(data);
                        })
                    })
                }else{
                    form.on('select(commonSelect'+f.id+')',function (data) {
                        f.select(data);
                    })
                }
            }
            //生成option
            function getOptions(){
                if(f.url&&!f.link){
                    f.data=that.getData(f.url,f.param);
                }
                let h='';
                $.each(f.initData,function (i,d) {h+='<option value="'+d.value+'">'+d.text+'</option>';});
                $.each(f.data,function (i,d) {
                    h+='<option value="'+f.getValue(d)+'">'+f.getText(d)+'</option>';
                });
                if(isArray){
                    f.id.forEach(d=>{
                        let a=$("#"+d);
                        a.empty();
                        a.append(h);
                    })
                }else{
                    let a=$("#"+f.id);
                    a.empty();
                    a.append(h);
                }
                form.render('select');
                return h;
            }
            return getOptions();
		}
	})
})

使用

<div class="layui-bg-white padding10 padding-l20 layui-form">
    <span class="layui-badge layui-bg-green">出发地：</span>
    <div class="layui-input-inline margin-l10">
        <label class="">省</label>
        <div class="searchBtn">
            <select name="select4" id="startp" lay-search></select>
        </div>
    </div>
    <div class="layui-input-inline">
        <label class="">市</label>
        <div class="searchBtn">
            <select name="select4" id="startc" lay-search></select>
        </div>
    </div>
    <div class="layui-input-inline">
        <label class="">区/县</label>
        <div class="searchBtn">
            <select name="select4" id="startd" lay-search></select>
        </div>
    </div>
</div>
<div class="layui-bg-white padding10 margin-b10 padding-l20 layui-form">
    <span class="layui-badge">目的地：</span>
    <div class="layui-input-inline margin-l10">
        <label class="">省</label>
        <div class="searchBtn">
            <select name="select4" id="endp" lay-search></select>
        </div>
    </div>
    <div class="layui-input-inline">
        <label class="">市</label>
        <div class="searchBtn">
            <select name="select4" id="endc" lay-search></select>
        </div>
    </div>
    <div class="layui-input-inline">
        <label class="">区/县</label>
        <div class="searchBtn">
            <select name="select4" id="endd" lay-search></select>
        </div>
    </div>
    <button class="layui-btn layui-btn-sm" event="addLines" style="position: relative;bottom:30px">添加线路</button>
</div>
<script>
layui.use(['common'],function (com) {
    com.getSelect({
        id:['startp','endp'],//同时渲染多个
        url:'/area/list',
        param:{level:1,parentId:0},
        value:'id',
        text:'areaName',
    })
    com.getSelect({
        id:'startc',
        url:'/area/list',
        param:{parentId:0,level:2},
        value:'id',
        text:'areaName',
        link:'startp'
    })
    com.getSelect({
        id:'startd',
        url:'/area/list',
        param:{parentId:0,level:3},
        value:'id',
        text:'areaName',
        link:'startc'
    })
    com.getSelect({
        id:'endc',
        url:'/area/list',
        param:{parentId:0,level:2},
        value:'id',
        text:'areaName',
        link:'endp'
    })
    com.getSelect({
        id:'endd',
        url:'/area/list',
        param:{parentId:0,level:3},
        value:'id',
        text:'areaName',
        link:'endc'
    })
})
</script>