zoukankan      html  css  js  c++  java
  • 单选按钮和下拉框默认选中

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

    ​ 在使用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>
    
  • 相关阅读:
    黑马程序员_Java学习日记num13
    黑马程序员_Java学习日记num12
    黑马程序员_Java学习日记num11
    黑马程序员_Java学习日记num10
    黑马程序员_Java学习日记num9
    黑马程序员_Java学习日记num8
    黑马程序员_Java学习日记num7
    黑马程序员_Java学习日记num6
    黑那程序员_Java学习日记num5
    Happy May!
  • 原文地址:https://www.cnblogs.com/Mhang/p/11207538.html
Copyright © 2011-2022 走看看