下面是一个示例代码，使用
layui动态添加下拉框
组件，并
渲染数据：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加下拉框
组件</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/
layui/2.5.6/css/
layui.css">
</head>
<body>
<div class="
layui-form" lay-filter="test">
<div class="
layui-form-item">
<label class="
layui-form-label">下拉框1</label>
<div class="
layui-input-inline">
<select name="select1">
<option value=""></option>
</select>
</div>
</div>
</div>
<button class="
layui-btn" id="addSelect">添加下拉框</button>
<script src="https://cdn.staticfile.org/
layui/2.5.6/
layui.js"></script>
<script>
layui.use(['form', '
jquery'], function() {
var form =
layui.form;
var $ =
layui.
jquery;
// 添加下拉框
$('#addSelect').click(function() {
var index = $('.
layui-form-item').length;
var selectHtml = '<div class="
layui-form-item">' +
'<label class="
layui-form-label">下拉框' + index + '</label>' +
'<div class="
layui-input-inline">' +
'<select name="select' + index + '">' +
'<option value=""></option>' +
'</select>' +
'</div>' +
'</div>';
$('.
layui-form').append(selectHtml);
form.render('select');
});
//
渲染数据
var data = [{
id: 1,
name: '选项1'
}, {
id: 2,
name: '选项2'
}, {
id: 3,
name: '选项3'
}];
$.each(data, function(index, item) {
$('select[name="select1"]').append('<option value="' + item.id + '">' + item.name + '</option>');
});
});
</script>
</body>
</html>
```
在这个示例中，我们首先在页面上添加了一个下拉框
组件，然后添加了一个按钮，用于动态添加下拉框
组件。
当点击添加下拉框按钮时，我们使用
jQuery动态生成下拉框
组件的HTML代码，并将其添加到页面上的
表单中。然后，我们使用
layui的form模块的`render`方法
重新渲染表单，以使新添加的下拉框
组件能够正常工作。
最后，我们还使用
jQuery将数据
渲染到第一个下拉框
组件中。这里我们使用了
jQuery的`$.each`方法，遍历数据数组，并使用
jQuery的`append`方法将每个数据项添加到下拉框
组件中。
扫一扫
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
