layui联动模块化

分享 未结 3 1475
Thans
Thans VIP3 2017-11-7
悬赏:20飞吻

调用:
select2.init('category_id','name','{{ get_category }}' + '?&seller_token='+ '{{ seller_token }}','pid');
select2.run(0,'category_first_1');
通过init设置返回值下标、内容,设置ID参数。

我说不太清
看代码吧
/**
* Name:select2.js
* Author:Thans
* E-mail:360641274@qq.com
* LICENSE:MIT
*/
// <div class="layui-input-inline">
// <select id="category_first_1" data-child="category_first_2" lay-filter="category_first_1" lay-search>
// <option value="-1" selected="">请选择分类</option>
// </select>
// </div>
// <div class="layui-input-inline">
// <select id="category_first_2" data-child="category_first_3" lay-filter="category_first_2" lay-search>
// <option value="-1">请选择分类</option>
// </select>
// </div>
// <div class="layui-input-inline">
// <select id="category_first_3" lay-filter="category_first_3" lay-search>
// <option value="-1">请选择分类</option>
// </select>
// </div>

layui.define(['layer', 'jquery', 'form'], function (exports) {
var $ = layui.jquery,
form = layui.form,
layer = layui.layer;
var _title = '';
var _value = '';
var url = '';
var param_title = '';
var select = {
init: function (title, value, ajax,param) {
_title = title;
_value = value;

url = ajax;
param_title = param;
},
run: function (pid, id) {
if (pid == '-1') {
$('#'+id).empty();
$('#'+id).append('<option value="-1">请选择分类</option>');
form.render('select');
return false;
}
var index = layer.load(1);
var that = this;
var datas = {};
datas[param_title] = pid;
//加载分类三级联动
$.ajax({
url: url,
contentType: "application/json",
method: 'GET',
data:datas,
dataType: 'JSON',
success: function (res) {
$('#' + id).empty();
$('#' + id).append('<option value="-1">请选择分类</option>');
$.each(res.data, function (index, value) {
$('#' + id).append('<option value="' + value[_title] + '">' + value[_value] + '</option>');
});
form.render('select');

var child = $('#' + id).data('child');
if (child) {
form.on('select(' + id + ')', function (d) {
that.run(d.value, child);
});
}
layer.close(index);
},
error: function (res) {
layer.msg('网络错误');
}
})
}
}
exports('select2', select);
});
回帖
本帖已设置禁止回复