jquery ajax select 二级联动

原创
2012/05/25 17:00
阅读数 3.4K

产品分类需要做二级分类

代码清单1:

package com.servlet;


import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import com.bean.SecondType;
import com.factory.DAOFactory;

public class QuerySecondTypeByMainTypeIdServlet extends HttpServlet {
  
	private static final long serialVersionUID = 1L;
	@Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    		throws ServletException, IOException {
		
       int main_type_id=Integer.parseInt(req.getParameter("main_type"));
      List<SecondType> listST= DAOFactory.getTypeDAOInstance().getSecondTypeByMainTypeId(main_type_id);
      JSONArray object = JSONArray.fromObject(listST);
      System.out.println(object.toString());
      sendMsg(object.toString(), resp);
    } 
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    		throws ServletException, IOException {
    	doPost(req, resp);
    }
    public  void sendMsg(String content,HttpServletResponse response)throws IOException{
    	response.setCharacterEncoding("utf-8");
    	PrintWriter out =response.getWriter();
    	out.write(content);
    	out.flush();
    	out.close();
    	
    }
}

代码清单2:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.factory.DAOFactory" %>
<%@ page import="com.bean.MainType" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'addSecondType.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="<%=path %>/script/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
	   $(document).ready(function(){
	   $("#main_type").change(function(){
	   	// alert($(this).val());
	  	$_mainTypeId=$(this).val();
	  	$.getJSON("./querySecondTypeByMainTypeId.do?main_type="+$_mainTypeId,"",function(response){
	  	$("#second_type").show();
	  	$("#second_type option").remove();
	  	$.each(response,function(i){
	  	   //console.dir(response[i]);
	  		$("#second_type").append("<option value="+response[i].second_type_id+">"+response[i].second_type_name+"</option>");
	  	});
	  	});	 	
	   });
	   })
	
	</script>
  </head>
  
  <body>
  <%
  List<MainType> listMT=  DAOFactory.getTypeDAOInstance().queryAllMainType();
   %>
       类别:<select name="main_type" id="main_type">
       <%
        for(int i=0;i<listMT.size();i++){
         MainType mainType= (MainType)listMT.get(i);
        int main_type_id= mainType.getMain_type_id();
        String main_type_name= mainType.getMain_type_name();
        %>
        <option value="<%=main_type_id %>"><%=main_type_name%></option>
        <%
        }
        %>
       </select>
       <select name="second_type" id="second_type" style="display: none;">
       </select>
  </body>
</html>

效果截图

代码很恶心,大家凑合看吧。

知识点总结:

1.JSONArray封装数据

2.jquery 对select 操作

3.复习jquery ajax操作

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
1
分享
返回顶部
顶部