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

内容导读

收集整理的这篇技术教程文章主要介绍了基于layui实现动态添加下拉选择框的模块，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2684字，纯文字阅读大概需要4分钟。

内容图文

本篇文章给大家带来的内容是关于基于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 formfor(i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];} else {// rfc4122, version 4 formvar r;// rfc4122 requires these charactersuuid[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.5for(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 下拉选中的值jslayui.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实现动态添加下拉选择框的模块的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是为您收集整理的基于layui实现动态添加下拉选择框的模块全部内容，希望文章能够帮你解决基于layui实现动态添加下拉选择框的模块所遇到的程序开发问题。 如果觉得技术教程内容还不错，欢迎将网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。