Layuiダイナミックレンダリングドロップダウンボックス
14296 ワード
この例にはテストページコードが含まれています.ツールメソッドはselectUtilのみです.
<html>
<head>
<meta charset="utf-8">
<title>Layui title>
<link rel="stylesheet" href="../../layui/css/layui.css" />
<style>
body {
padding: 18px;
}
style>
head>
<body>
<form class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label"> label>
<div class="layui-input-inline">
<select id="select_type">select>
div>
div>
div>
form>
body>
<script src="../../layui/layui.js">script>
<script>
layui.use(['form'], function() {
var $ = layui.$,
form = layui.form;
//
var datas = [];
for (var i = 0; i < 40; i++) {
datas.push({
id: i,
text: 'text_' + i
});
}
//
selectUtil.render({
id: 'select_type',
data: datas
});
});
script>
<script>
// Layui
var selectUtil = {
render: function(param) {
var $ = layui.$,
form = layui.form;
var id = param.id,
prop = param.prop || {
id: 'id',
text: 'text'
},
datas = param.data || [];
var $select = $('#' + id);
//
$select.empty();
$.each(datas, function(index, item) {
var $option = $(' item[prop.id] + '">' + item[prop.text] + '');
$select.append($option);
});
form.render('select');
}
}
script>
html>