基于layui实现动态添加下拉选择框的模块

不言
发布: 2018-08-25 10:51:09
原创
8386人浏览过

本篇文章给大家带来的内容是关于基于layui实现动态添加下拉选择框的模块,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

这星期刚接触layui,看到她的模块化,于是动手弄了个select选择拉练习不多说下面贴代码,不足地方请指出

/**
 * 基于layui扩展一个动态添加下拉选择框模块
 */
layui.define(['form', 'jquery'], function(exports) { //提示:模块也可以依赖其它模块,如:layui.define('layer', callback);
var form = layui.form;
var jquery = layui.jquery;
function selectDropDown() {
/**
 * 生成uuid 
 * @param {len} 长度
 * @param {radix} 进制 如 2,10,16
 */
this.uuid = function(len, radix) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
var uuid = [],
i;
radix = radix || chars.length;
if(len) {
// Compact form
for(i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
} else {
// rfc4122, version 4 form
var r;
// rfc4122 requires these characters
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
// Fill in random data. At i==19 set the high bits of clock sequence as
// per rfc4122, sec. 4.1.5
for(i = 0; i < 36; i++) {
if(!uuid[i]) {
r = 0 | Math.random() * 16;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
}
this.init = function(opts) {
opts = jQuery.extend({
target: '',
options: [],
onSelect:function(){}
}, opts || {});
var uuid = this.uuid(8, 16);
var target = jquery(opts.target);
target.addClass('layui-form');
target.attr('lay-filter', "select"+uuid);
var original = target.attr('data-original');
var currentValue = target.attr('data-value');
var domSelect = jquery('<select/>');
domSelect.attr('lay-filter', "domSelect"+uuid);
for(var i = 0; i < opts.options.length; i++) {
var o = opts.options[i];
var domOption = jquery('<option/>');
domOption.text(o.text);
domOption.val(o.value);
if(original === o.value.toString()) {
domOption.attr('selected', 'selected');
}
domSelect.append(domOption);
}
target.append(domSelect);
form.on("select(domSelect"+uuid+")", function(data) {
target.attr('data-value',data.value);
opts.onSelect(data);//下拉选中后回调
});
form.render('select', "select"+uuid);//刷新渲染
}
}
//输出select接口
exports('select', selectDropDown);
});
登录后复制

使用时
html 部分

<div style="width: 300px; margin-right: 20px;" id="sex" data-original="女" data-value="女"></div>
 data-original 初始值
 data-value 下拉选中的值
js
layui.use(['select'], function() {
 var select = layui.select; 
 var sexOptions = [
 {text:'男',value:"男"},
 {text:'女',value:"女"}
];
var sexSelect = new select();
sexSelect.init({target:'#sex',options:sexOptions});
});
登录后复制

相关推荐:

jquery基于layui实现二级联动下拉选择

js下拉选择框与输入框联动实现添加选中值到输入框的方法_javascript技巧

以上就是基于layui实现动态添加下拉选择框的模块的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号