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>