layui中的select组件动态给option值，并默认选中指定的option

最新推荐文章于 2023-12-21 06:41:33 发布

yzhSWJ

最新推荐文章于 2023-12-21 06:41:33 发布

阅读量3.7k

点赞数 1

分类专栏： layui select 动态给option 文章标签： jquery html5 css3 html

本文链接：https://blog.csdn.net/yuzheh521/article/details/105974006

版权

layui 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

select

1 篇文章 0 订阅

订阅专栏

动态给option

1 篇文章 0 订阅

订阅专栏

1.下载好layui跟jquery所需要的jar
2.代码实例(可直接粘贴复制使用)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui-select的动态的option</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css" media="all">
	</head>
	<body>
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">动态option的选择框</label>
				<div class="layui-input-block">
					<select name="test" lay-verify="required" lay-filter="test" id="test">

					</select>
				</div>
			</div>

		</form>
		<script src="jquery-3.3.1.min.js"></script>
		<script src="layui-v2.5.6/layui/layui.js" charset="utf-8"></script>
		<script>
			
			layui.use('form', function() {
				var form = layui.form;
				
				//数据
				data = [{
					id: 1,
					name: 'aaaa'
				}, {
					id: 2,
					name: 'bbbb'
				}, {
					id: 3,
					name: 'cccc'
				}];
				//遍历数据追加到select中
				$('#test').empty(); //渲染之前要清空一下,以免重复渲染
				$('#test').append('<option value="" disabled>请选择</option> ');
				$.each(data, function(i, item) {
					$('#test').append(new Option(item.name, item.id));
				});
				//设置默认第一个被选中
				$("#test").find("option").eq(1).attr("selected", "true");
				form.render("select");//重新渲染 固定写法
				
				
				//监听select的选中
				form.on('select(test)', function(data) {
					console.log("选中option的value值为" + data.value);
				});
				
			});
		</script>
	</body>
</html>