本例包含測試頁面代碼，工具方法只有selectUtil
<!DOCTYPE html>
<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 = $('<option value="' + item[prop.id] + '">' + item[prop.text] + '</option>');
$select.append($option);
});
form.render('select');
}
}
</script>
</html>