Ein Modul zum dynamischen Hinzufügen von Dropdown-Auswahlfeldern basierend auf Laui

Der Inhalt dieses Artikels befasst sich mit dem Modul zum dynamischen Hinzufügen von Dropdown-Auswahlfeldern. Es hat einen gewissen Referenzwert. Ich hoffe, es wird für Sie hilfreich sein.

Ich bin diese Woche erst mit Laui in Kontakt gekommen und habe die Modularität gesehen. Ich werde daher nicht näher auf den Code eingehen Weisen Sie auf eventuelle Mängel hin.

/**
 * 基于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] = &#39;-&#39;;
uuid[14] = &#39;4&#39;;
// 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(&#39;&#39;);
}
this.init = function(opts) {
opts = jQuery.extend({
target: &#39;&#39;,
options: [],
onSelect:function(){}
}, opts || {});
var uuid = this.uuid(8, 16);
var target = jquery(opts.target);
target.addClass(&#39;layui-form&#39;);
target.attr(&#39;lay-filter&#39;, "select"+uuid);
var original = target.attr(&#39;data-original&#39;);
var currentValue = target.attr(&#39;data-value&#39;);
var domSelect = jquery(&#39;<select/>&#39;);
domSelect.attr(&#39;lay-filter&#39;, "domSelect"+uuid);
for(var i = 0; i < opts.options.length; i++) {
var o = opts.options[i];
var domOption = jquery(&#39;<option/>&#39;);
domOption.text(o.text);
domOption.val(o.value);
if(original === o.value.toString()) {
domOption.attr(&#39;selected&#39;, &#39;selected&#39;);
}
domSelect.append(domOption);
}
target.append(domSelect);
form.on("select(domSelect"+uuid+")", function(data) {
target.attr(&#39;data-value&#39;,data.value);
opts.onSelect(data);//下拉选中后回调
});
form.render(&#39;select&#39;, "select"+uuid);//刷新渲染
}
}
//输出select接口
exports(&#39;select&#39;, selectDropDown);
});

Verwenden Sie den
HTML-Teil

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

Verwandte Empfehlungen:

jquery implementiert die Dropdown-Auswahl für sekundäre Verknüpfungen auf Laui

So verknüpfen Sie das js-Dropdown-Auswahlfeld und das Eingabefeld, um den ausgewählten Wert zum Eingabefeld hinzuzufügen_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonEin Modul zum dynamischen Hinzufügen von Dropdown-Auswahlfeldern basierend auf Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!