<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
	<%@ include file="../../common/head.jsp"%>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
            	 <cs:form_validate formId="addRoleForm"/>
                  <form class="form-horizontal" action="add.cs" id="addRoleForm" method="POST">
                      <div class="form-group">
                          <label class="col-sm-3 control-label">代码：</label>
                          <div class="col-sm-6">
                              <input id="code" name="code"  class="form-control" validate="{required:true}" validateMessage="{required:'请输入code,不能重复'}" >
                          </div>
                      </div>
                      
                      <div class="form-group">
                          <label class="col-sm-3 control-label">上级分类：</label>
                          <div class="col-sm-6">
                              <select class="form-control m-b" id="oneCategoryId" name="oneCategoryId" onchange="menuChange(this)" validate="{required:true}" validateMessage="{required:'请输入code,不能重复'}">
                              		<option value="">请选择</option>
                              		<c:forEach items="${firstCategory }" var="superMenu">
                              			<option value="${superMenu.id }" >${superMenu.gcName}</option>
                              		</c:forEach>
                              </select>
                          </div>
                      </div>
                     <script type="text/javascript">
                     function menuChange(obj){
                    	 var ss = $(obj).children('option:selected').val();  
                    	 $("#tlb").css("display","none");
                    	 $("#thlb").css("display","none");
                    	 $("#folb").css("display","none");
                    	 $("#twoCategoryId").empty();
                    	 $("#threeCategoryId").empty();
                    	 $("#fourCategoryId").empty();
                         $.ajax({
                             type: "get",
                             url: "<%=basePath%>mgmProductCategoryCtl/nextCategory.cs",
                             data: {id:ss},
                             dataType: "json",
                             success: function(data){
                                   	if(data.mlist.length > 0){
                                   	$("#tlb").css("display","block");
                                   	$("#twoCategoryId").empty();
                                   	$("#twoCategoryId").append("<option value='0'>请选择</option>");
                                   	data.mlist.forEach(function(val,index,arr){
                                   		  $("#twoCategoryId").append("<option value='"+val.id+"'>"+ val.gcName+"</option>");            
                                   		});
                                   	}
                                 }
                         });
                         
                     }
                     
                     function twoMenuChange(obj){
                    	 var ss = $(obj).children('option:selected').val();  
                    	 $("#thlb").css("display","none");
                    	 $("#folb").css("display","none");
                    	 $("#threeCategoryId").empty();
                    	 $("#fourCategoryId").empty();
                         $.ajax({
                             type: "get",
                             url: "<%=basePath%>mgmProductCategoryCtl/nextCategory.cs",
                             data: {id:ss},
                             dataType: "json",
                             success: function(data){
                         			if(data.mlist.length > 0){
                         			 $("#thlb").css("display","block");
                         			$("#threeCategoryId").empty();
                                   	$("#threeCategoryId").append("<option value='0'>请选择</option>");
                                  	data.mlist.forEach(function(val,index,arr){
                                  		  $("#threeCategoryId").append("<option value='"+val.id+"'>"+ val.gcName+"</option>");            
                                  		});
                         			}
                                 }
                         });
                         
                     }
                     function threeMenuChange(obj){
                    	 var ss = $(obj).children('option:selected').val();  
                    	 $("#folb").css("display","none");
                    	 $("#fourCategoryId").empty();
                         $.ajax({
                             type: "get",
                             url: "<%=basePath%>mgmProductCategoryCtl/nextCategory.cs",
                             data: {id:ss},
                             dataType: "json",
                             success: function(data){
                        			 if(data.mlist.length > 0){
                        			 $("#folb").css("display","block");
                        			 $("#fourCategoryId").empty();
                                    	$("#fourCategoryId").append("<option value='0'>请选择</option>");
                                 	data.mlist.forEach(function(val,index,arr){
                                 		  $("#fourCategoryId").append("<option value='"+val.id+"'>"+ val.gcName+"</option>");            
                                 		});
                        			 }
                                 }
                         });
                         
                     }
                     </script>
                     
                     <div id="tlb" class="form-group" style="display:none;">
                          <label class="col-sm-3 control-label">二级分类：</label>
                          <div class="col-sm-6">
                              <select class="form-control m-b" id="twoCategoryId" name="twoCategoryId" onchange="twoMenuChange(this)">
                              		<option value="0">请选择</option>
                              </select>
                          </div>
                      </div>
                      
                      <div id="thlb" class="form-group" style="display:none;"> 
                          <label class="col-sm-3 control-label">三级分类：</label>
                          <div class="col-sm-6">
                              <select class="form-control m-b" id="threeCategoryId" name="threeCategoryId" onchange="threeMenuChange(this)">
                              		<option value="0">请选择</option>
                              </select>
                          </div>
                      </div>
                      
                      <div id="folb" class="form-group" style="display:none;"> 
                          <label class="col-sm-3 control-label">四级分类：</label>
                          <div class="col-sm-6">
                              <select class="form-control m-b" id="fourCategoryId" name="fourCategoryId" >
                              		<option value="0">请选择</option>
                              </select>
                          </div>
                      </div>
                      
                      
                     <div class="form-group">
                          <label class="col-sm-3 control-label">名称：</label>
                          <div class="col-sm-6">
                              <input id="name" name="name" class="form-control" validate="{required:true}" validateMessage="{required:'请输入名称'}" >
                          </div>
                      </div>
                      
                     <div class="form-group">
                          <label class="col-sm-3 control-label">描述：</label>
                          <div class="col-sm-6">
                              <input id="note" name="note" class="form-control"  >
                          </div>
                      </div>
                      <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-3 pull-left">
                                    <button class="btn btn-default btn-dlg-close">取消</button>
                                    <button class="btn btn-primary" type="submit">提交</button>
                                </div>
                       </div>
                  </form>
            </div>
        </div>
    </div>
</body>
</html>

