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

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

​ 在使用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>
原文地址:https://www.cnblogs.com/Mhang/p/11207538.html