layui表单单选按钮和下拉框默认选中

单选按钮和下拉框默认选中

​ 在使用layui的单选按钮和下拉框时,有时候需要将后台传过来的值使得单选框和下拉菜单默认选中。我的方法是将后台穿过来的值先放在一个隐藏域中,然后再去取值。

1.HTML片段

<div class="layui-inline">
	<label class="layui-form-label">所属类别:</label>
    <div class="layui-input-inline">
    	<select name="menuId" lay-verify="required" lay-search="" id="menuId">

        </select>
	</div>
	<input type="hidden" id="menuId2" value="${artical.menuId}"/>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">是否推荐:</label>
	<div class="layui-input-block">
    	<input type="radio" name="recommended" value="true" title="YES" >
        <input type="radio" name="recommended" value="false" title="NO" checked="">
        <input type="hidden" id="recommended" value="${artical.recommended}"/>
    </div>
</div>

2.javaScript代码

<script type="text/javascript">
	$(function() {
    	//异步加载获得下拉框中的值
		$.post({
        	url: "${pageContext.request.contextPath}/menu/getAllMenu",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "",
            success: function (data) {
            	$("#menuId").empty();
            	$("#menuId").append("<option value=''>直接选择或搜索选择</option>");
                for (var i = 0; i < data.length; i++) {
                	$("#menuId").append('<option value=' + data[i].menuId + '>' + data[i].menuName + '</option>');
                }
            }
        });
    	var recommended = $("#recommended").val();
		if(recommended){
			$("input:radio[name='recommended']			[value="+recommended+"]").attr('checked','true');
        }
	});
</script>
<script type="text/javascript" charset="utf-8">
	layui.use(['upload','layer','form'], function() {
    	var $ = layui.jquery
    		,form = layui.form
    		,layer = layui.layer;
    	//获取返回的值
		$("#menuId").val($('#menuId2').val());
    	//从新渲染表单
		form.render('select');
	});
</script>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui是一种基于layui框架的前端UI库,可以方便地在网页中创建动态表格和下拉框等组件。 使用Layui动态表格带搜索的下拉框,首先需要引入LayUI的相关文件,如layui.css、layui.js等。然后,在HTML中定义一个表格容器,可以使用div标签,并给它一个id,方便后续的操作。 接下来,在JavaScript中通过Layui的table模块进行表格的初始化和渲染。我们可以使用table.render()方法,传入一些参数来定义表格的样式、列属性以及数据源等。在其中的cols配置项中,我们可以定义表格的列,包括列头名称、字段名、宽度等信息。此时,我们可以在列的属性中增加一个toolbar属性,来定义表格的工具栏。 其中的toolbar可以是一个函数,用于渲染每一行的工具栏内容。我们可以在这个函数中创建一个下拉框,通过Layui的form模块进行渲染和监听。我们可以使用form.on()方法来监听下拉框选中事件,并在监听函数中处理相应的逻辑。 在表格中,我们可以使用formSelects组件,它是一个基于Layui的多选、搜索等功能的下拉框插件。我们可以通过定义一个元素的class为select,然后使用formSelects.render()方法来渲染下拉框。可以定义一些参数,例如最多可选的数量、搜索框的位置等。 总结来说,要使用Layui动态表格带搜索的下拉框,我们需要引入Layui的相关文件,然后在HTML中定义表格容器,并在JavaScript中使用Layui的table模块进行表格的初始化和渲染。在列属性中,我们可以添加一个toolbar属性来定义行的工具栏。可以使用form.on()方法监听下拉框选中事件,并在监听函数中处理逻辑。同时,也可以使用formSelects组件来实现多选、搜索等功能的下拉框。通过这些步骤,我们可以方便地实现Layui动态表格带搜索的下拉框的使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值