zoukankan      html  css  js  c++  java
  • ajax,下拉框级联

    js代码:

    $(document).ready(function() {	
       $("#type1").change(function(){  
          var type1Code=$("#type1").val(); 
          $("#type2").empty();  
          if (type1Code!=0) {  
           $.ajax({  
             type:'post',  
             url:'getType2.action',  
             data:'type1Code='+type1Code,  
             dataType:'json',  
             success:function(json){  
                if(null != json){  
                   $("#type2").append("<option value=''>请选择二级类型</option>");  
                    for(var i=0; i< json.type2List.length;i++){  
                      $("#type2").append("<option value='"  
                       +json.type2List[i].type2Code+"'>"  
                       +json.type2List[i].type2Name+"</option>");  
                    }  
                }   
             },  
             error:function(){        
              alert('取二级类型异常!');        
           }  
          });  
        }else{  
        $("#type2").append("<option value=''>请选择二级类型</option>");  
        }  
        });
    

     jsp代码:

    	<td>
    			一级类型:
    	</td>
    	<td align="left">
    			<s:select id="type1" name="vo.type1" list="vo.type1List"
    				headerKey="0" headerValue="请选择一级类型" listKey="code"
    				listValue="name"></s:select>
    	</td>
    	<td>
    			二级类型:
    	</td>
    	<td align="left">
    			<select id="type2" name="vo.type2">
    				<option value="">
    					请选择二级类型
    				</option>
    			</select>
    	</td>
    

     struts.xml文件配置:

     <package name="plan" extends="base-action" namespace="/plan">
       
             <result-types>
    			<result-type name="json" class="com.googlecode.jsonplugin.JSONResult" />
    		</result-types>
    		<interceptors>
    			<interceptor name="json" class="com.googlecode.jsonplugin.JSONResult" />
    		</interceptors>
    		
    		<action name="getType2" class="planUploadAction" method="getType2">
    		    <interceptor-ref name="ebStackWithoutValidationAndToken" />
    			<result type="json"></result>
    			<result name="input" type="chain">init</result>
    			<result name="invalid.token" type="chain">init</result>
    			<exception-mapping result="success" exception="java.lang.Exception" />
    		</action>
    		
    		。。。。。。
    		
    	</package>
    

     对应action中的方法:

    	/**
    	 * 取二级类型
    	 * @return
    	 */
    	public String getType2(){
    		try{
    			String type1Code=request.getParameter("type1Code");
    			String type2Code="type2_"+type1Code;
    			List<HashMap<String, Object>> lit = new ArrayList<HashMap<String, Object>>();
    			JSONObject json = new JSONObject();
    			HashMap<String, Object> map = new HashMap<String, Object>();
    			//二级类别
    			List<SystemParamVO> type2List=sysParamTypeService.listParamByType(type2Code);
    			for(SystemParamVO type2:type2List){
    				map = new HashMap<String, Object>();
    				map.put("type2Code", type2.getCode());
    				map.put("type2Name", type2.getName());
    				lit.add(map);
    			}
    			json.put("type2List", lit);
    			response.setCharacterEncoding("UTF-8");
    			PrintWriter out = response.getWriter();
    			out.write(json.toString());
    		}catch (Exception e) {
    			log.error(e.getMessage(), e);
    			response.setStatus(500);
    		}
    		return null;
    	}
    
  • 相关阅读:
    Linux学习33 crontab定时任务语法在线校验 上海
    python测试开发django175.bootstrap导航带下拉菜单的标签页标签页(navtabs) 上海
    python测试开发django172.jQuery 发送请求获取的数据设置为全局变量 上海
    team讨论有感
    蜕变(3)---模式
    uml建模的随想
    Bridge Strategy 和State的区别
    友元在模式中的运用
    Design&Pattern团队《设计模式在软件开发的应用》精华版
    面向对象乱弹(一)
  • 原文地址:https://www.cnblogs.com/gexiaoshan/p/3488856.html
Copyright © 2011-2022 走看看