layui表单select点击数据回选

本文介绍如何在layui表单中实现select选项的点击回选功能,通过示例代码展示具体操作,包括HTML结构和JS逻辑。
摘要由CSDN通过智能技术生成

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>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值