显示效果
页面代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> <style>body{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.use(['multiSelect'],function() { var $ = layui.jquery,form = layui.form,multiSelect = layui.multiSelect; $('#get-val').click(function() { var vals = [], texts = []; $('select[multiple] 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[multiple]').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[idx] && o(this).find('input').val(selected_vals[idx].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[idx] = [];
// 先清除真实下拉款选中的值，在下面循环中重新赋值选中
t.find('option').prop('selected', false);
dt.parents('dl').find('[type=checkbox]:checked').each(function() {
var val = o(this).parent().attr('lay-value');
t.find('option[value=' + val + ']').prop('selected', true);
selected_vals[idx].push(o(this).attr('title'));
})
// 显示已选信息
dt.parents('dl').prev().find('input').val(selected_vals[idx].join(','));
}
multiSelect.prototype.render = function(type, filter) {
form.render(type, filter);
this.init();
}
var i = new multiSelect();
i.init();
exports(MOD_NAME, i);
});联系客服
