layui表单select点击数据回选

时间:2024-03-13 12:20:11

select数据回显


这是一个基础的layui表单select的数据操作,欢迎指出更改意见。

直入主题,直接上代码

效果图
layui表单select点击数据回选
layui表单select点击数据回选
点击回选按钮,成功选中了阅读

HTML

<div class="zjC">
	<form class="layui-form" action="" lay-filter="example">
		<div class="layui-form-item">
		    <label class="layui-form-label">选择框</label>
		    <div class="layui-input-block">
		      	<select name="interest">
			        <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 class="layui-form-item" style="text-align: right;">
		    <button type="button" class="layui-btn zj">点击回选</button>
		</div>
 	</form>
</div>

JS

<script type="text/javascript">
	layui.use(['form'], function(){
		//加载layui表单form
	  	var form = layui.form;
	  	
	  	//这里我用点击事件触发他的回选
		$('.zj').click(function(){
			//表单初始赋值  
			form.val('example', {
				//我这里固定了一个1,点击选中  阅读
	    		"interest": 1
	  		})
			//重新加载layui的表单
			form.render();
		})
	});
</script>