单选按钮和下拉框默认选中
在使用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>