显示效果

页面代码

!DOCTYPE html
html
head
meta charset=UTF-8
title/title
link rel=stylesheet type=text/css href=layui/css/layui.css/
stylebody{padding:20px;}.multi dl dd.layui-this{background-color:#fff}/style
/head
body
form class=layui-form layui-form-pane action=

div class=layui-form-item
label class=layui-form-label代理地区/label
div class=layui-input-block
select multiple=multiple lay-filter=test
option value=/option
option value=0 selected写作/option
option value=1阅读/option
option value=2游戏/option
option value=3 selected音乐/option
option value=4旅行/option
/select
/div
/div

!–div class=layui-form-item–
!–label class=layui-form-label单选/label–
!–div class=layui-input-block–
!–select–
!–option value=/option–
!–option value=0写作/option–
!–option value=1 selected阅读/option–
!–option value=2游戏/option–
!–option value=3 selected音乐/option–
!–option value=4旅行/option–
!–/select–
!–/div–
!–/div–

!–button type=button class=layui-btn layui-btn-normal id=get-val获取选中值/button–
/form
script type=text/javascript src=layui/layui.js/script
script type=text/javascript
layui.config({
base: js/, //实际的multiSelect.JS文件位置,也可以用script引入

})
layui.use(,function() {
var $ = layui.jquery,form = layui.form,multiSelect = layui.multiSelect;
$(#get-val).click(function() {
var vals = ,
texts = ;
$(select option:selected).each(function() {
vals.push($(this).val());
texts.push($(this).text());
})
console.dir(vals);
console.dir(texts);
})
form.on(select(test),function(data){
console.dir(data);
})
});
/script
/body
/html

3multiSelect.JS文件代码,放置的路径要和引入路径一致

layui.define(form, function(exports) {
var MOD_NAME = multiSelect,
o = layui.jquery,
form = layui.form,
selected_vals = ,
multiSelect = function() {};

multiSelect.prototype.init = function() {
var ts = this;
o(select).each(function(idx, item) {
var t = o(this),
selds = ;
t.find(option:selected).each(function() {
selds.push(o(this).val());
})
t.next().addClass(multi).find(.layui-select-title).click(function() {
selected_vals o(this).find(input).val(selected_vals.join(,));
}).next().find(dd).each(function() {
var dt = o(this),
checked = (dt.hasClass(layui-this) || o.inArray(dt.attr(lay-value), selds) -1) ? checked : ,
title = dt.text(),
disabled = dt.attr(lay-value) === ? disabled : ;
dt.html(input type=checkbox lay-skin=primary title= + title + + checked + + disabled + );
ts.selected(idx, t, dt);
}).click(function(e) {
var dt = o(this);
// 点击下拉框每一行触发选中和反选
if(e.target.localName == dd dt.attr(lay-value) !== ) {
var status = dt.find(.layui-form-checkbox).toggleClass(layui-form-checked).hasClass(layui-form-checked);
dt.find(input).prop(checked, status);
}
// 禁止下拉框收回
dt.parents(.layui-form-select).addClass(layui-form-selected);
ts.selected(idx, t, dt);
});
})
form.render(checkbox);
}

multiSelect.prototype.selected = function(idx, t, dt) {
// 选中值存入数组
selected_vals = ;
// 先清除真实下拉款选中的值，在下面循环中重新赋值选中
t.find(option).prop(selected, false);
dt.parents(dl).find(:checked).each(function() {
var val = o(this).parent().attr(lay-value);
t.find(option).prop(selected, true);
selected_vals.push(o(this).attr(title));
})
// 显示已选信息
dt.parents(dl).prev().find(input).val(selected_vals.join(,));
}

multiSelect.prototype.render = function(type, filter) {
form.render(type, filter);
this.init();
}

var i = new multiSelect();
i.init();

exports(MOD_NAME, i);
});