layui动态添加表单元素select样式解析 -六月初技术站

layui动态添加表单元素select样式解析

六月初 HTML 2023-02-04 22:27:48

layui虽然没有jq时代那般火热，但对于现在全栈或者大多数后端来说。它依旧是一个热门的选择，那么基于layui我们如何实现动态添加select效果呢？

效果如图：点击“动态添加select”动态添加一个select选项

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/css/layui.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.min.js"></script>
	</head>
	<body>
		<form class="layui-form" style="margin-top: 20px;" >
			<div id="addBox">
				<div class="layui-form-item">
				  <label class="layui-form-label">选择框</label>
				  <div class="layui-input-block">
				    <select name="city" lay-verify="required">
				      <option value=""></option>
				      <option value="0">北京</option>
				      <option value="1">上海</option>
				      <option value="2">广州</option>
				      <option value="3">深圳</option>
				      <option value="4">杭州</option>
				    </select>
				  </div>
				</div>
			</div>
		  
		  <div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn" type="button" onClick="add()">动态添加select</button>
		    </div>
		  </div>
		</form>
		 
		<script>
		//Demo
		
		function add(){
			layui.use('form', function(){
			  var form = layui.form;
			  var html = `<div class="layui-form-item">
				  <label class="layui-form-label">选择框</label>
				  <div class="layui-input-block">
				    <select name="city" lay-verify="required">
				      <option value=""></option>
				      <option value="0">北京</option>
				      <option value="1">上海</option>
				      <option value="2">广州</option>
				      <option value="3">深圳</option>
				      <option value="4">杭州</option>
				    </select>
				  </div>
				</div>`
				$("#addBox").append(html)
			  form.render();//没有写这个，操作后没有效果
			});
		}
		</script>
	</body>
</html>