The content of this article is about the module for dynamically adding drop-down selection boxes based on layui. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
I just came into contact with layui this week and saw its modularity, so I started to make a select. I won’t say much about the practice of selecting and pulling. I will post the code below. Please point out any deficiencies.
/** * 基于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(''); domSelect.attr('lay-filter', "domSelect"+uuid); for(var i = 0; i < opts.options.length; i++) { var o = opts.options[i]; var domOption = jquery(''); 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); });
Use When
html part
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}); });
Related recommendations:
jquery implements secondary linkage drop-down selection based on layui
The above is the detailed content of A module to dynamically add drop-down selection boxes based on layui. For more information, please follow other related articles on the PHP Chinese website!
How to configure Tomcat environment variables
What problems can js event bubbling solve?
Three major frameworks for android development
Introduction to monitoring equipment of weather stations
Mobile phone secondary card
The role of html title tag
memset function usage
Win11 My Computer Added to Desktop Tutorial
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
