layuiに基づいてドロップダウン選択ボックスを動的に追加するモジュール

この記事の内容は、layui をベースにドロップダウン選択ボックスを動的に追加するモジュールに関するもので、一定の参考価値がありますので、困っている友人は参考にしていただければ幸いです。

私は今週、layui に接し、そのモジュール性を見たばかりなので、選択を作成し始めました。選択とプルの実践については多くは言いません。コードを投稿します。

/**
 * 基于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);
});

いつ使用するか
html 部分

<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});
});

関連する推奨事項:

jquery はセカンダリ リンケージ ドロップを実装します。 layui に基づくダウン選択

js ドロップダウン選択ボックスと入力ボックスをリンクして、選択した値を入力ボックスに追加する方法_javascript スキル

以上がlayuiに基づいてドロップダウン選択ボックスを動的に追加するモジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。