在layui中实现
动态添加、
删除下
拉框组件，并且渲染数据的步骤如下：
1. 引入layui组件库：
```html
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.
js"></script>
```
2. 定义下
拉框组件的HTML结构：
```html
<div class="layui-form-item">
<div class="layui-
input-block">
<select name="select" lay-verify="required">
<option value="">请选择</option>
</select>
</div>
<div class="layui-
input-block">
<button class="layui-btn layui-btn-sm layui-btn-danger" onclick="deleteSelect(this)">
删除</button>
</div>
</div>
```
其中，`deleteSelect(this)`是
动态删除下
拉框的JavaScript函数。
3. 使用layui的form组件对下
拉框进行渲染：
```javascript
layui.use(['form'], function(){
var form = layui.form;
form.render('select');
});
```
4. 使用jQuery
动态添加下
拉框组件：
```javascript
function addSelect() {
var html = '<div class="layui-form-item">' +
'<div class="layui-
input-block">' +
'<select name="select" lay-verify="required">' +
'<option value="">请选择</option>' +
'</select>' +
'</div>' +
'<div class="layui-
input-block">' +
'<button class="layui-btn layui-btn-sm layui-btn-danger" onclick="deleteSelect(this)">
删除</button>' +
'</div>' +
'</div>';
$('#select-container').append(html);
layui.use(['form'], function(){
var form = layui.form;
form.render('select');
});
}
```
其中，`#select-container`是包含下
拉框组件的容器元素。
5. 使用jQuery
动态删除下
拉框组件：
```javascript
function deleteSelect(button) {
$(button).parents('.layui-form-item').remove();
}
```
完整代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
动态添加、
删除下
拉框组件</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<fieldset class="layui-elem-field">
<legend>
动态添加、
删除下
拉框组件</legend>
<div class="layui-field-box">
<div class="layui-form" lay-filter="form">
<div id="select-container">
<div class="layui-form-item">
<div class="layui-
input-block">
<select name="select" lay-verify="required">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
</select>
</div>
<div class="layui-
input-block">
<button class="layui-btn layui-btn-sm layui-btn-danger" onclick="deleteSelect(this)">
删除</button>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-
input-block">
<button class="layui-btn" onclick="addSelect()">
添加下
拉框</button>
</div>
</div>
<div class="layui-form-item">
<div class="layui-
input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="submit">提交</button>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<script src="layui/layui.
js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.
js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form;
form.render('select');
form.on('submit(submit)', function(data){
console.log(data.field);
return false;
});
});
function addSelect() {
var html = '<div class="layui-form-item">' +
'<div class="layui-
input-block">' +
'<select name="select" lay-verify="required">' +
'<option value="">请选择</option>' +
'<option value="1">选项1</option>' +
'<option value="2">选项2</option>' +
'<option value="3">选项3</option>' +
'<option value="4">选项4</option>' +
'<option value="5">选项5</option>' +
'</select>' +
'</div>' +
'<div class="layui-
input-block">' +
'<button class="layui-btn layui-btn-sm layui-btn-danger" onclick="deleteSelect(this)">
删除</button>' +
'</div>' +
'</div>';
$('#select-container').append(html);
layui.use(['form'], function(){
var form = layui.form;
form.render('select');
});
}
function deleteSelect(button) {
$(button).parents('.layui-form-item').remove();
}
</script>
</body>
</html>
```
最低0.47元/天 解锁文章
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
