级联复选框的实现

 
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.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">
  </head>
  	<script type="text/javascript">
  		var request = null;
		function createRequest(){
			if(window.XMLHttpRequest){
				//alert("firefox")
				request = new XMLHttpRequest();//FireFox/Opera浏览器支持的创建方式
			}else{
				//alert("ie");
				request = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
			}
			if(request == null){
				alert("Error creating request object!");
			}
		}
		function Change_Select(){		
				var firstid = document.getElementById('firstid').value;
				var url = "ShangpinCServlet?sid=" + escape(firstid);
				createRequest();
				request.open("GET", url, true);	//设置get方式		    
				request.onreadystatechange = callback;
	            request.send(null);  
			}
		function callback() {	
				if (request.readyState == 4) {
					if (request.status == 200) {
						parseMessage();
					}else{
						alert ("Not able to retrieve description" + req.statusText);
					}       
				}
			}
		function parseMessage() {  
				var xmlDoc = request.responseXML.documentElement; //返回xml
				var xSel = xmlDoc.getElementsByTagName('select');  
				var select_root = document.getElementById('secondid');	 
				select_root.options.length=0; //将原来选项清空,可以尝试隐藏,看效果   
				for(var i=0;i<xSel.length;i++){    
					var xValue = xSel[i].childNodes[0].firstChild.nodeValue;    
					var xText = xSel[i].childNodes[1].firstChild.nodeValue; 	
					var option = new Option(xText,xValue);
	   				try{
						//select_root.add(option);	//火狐不好用,仅ie可用;
						select_root[select_root.length]=option;		//ie和火狐都可以;
					}
					catch(e){		
					}    	
				} 
			}
  	</script>
  <body>
  商品信息分类:
   <select name="first" id="firstid" onChange="Change_Select()">
   <option value="0">-请选择-</option>
   	<c:forEach var="item" items="${firstMenu}">
   		<option value="${item.sbelong_id}">${item.sname }</option>
   	</c:forEach>
   </select>
    <select name="second" id="secondid">
   		<option value="0">-请选择-</option>
   </select>
  </body>
</html>


 
package com.jzh.dbutil;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class DBUtil {

	private static String drivers="oracle.jdbc.driver.OracleDriver";
	private static String url="jdbc:oracle:thin:@localhost:1521:oracle";
	private static String user="scott";
	private static String password="tiger";


	public static Connection getConnection() throws SQLException {
		Connection conn = null;
		try {
			Class.forName(drivers);
			conn = DriverManager.getConnection(url, user, password);
		} catch (Exception e) {
			e.printStackTrace();
		}
		if (conn == null) {
			throw new SQLException("ajax.DBUtils: Cannot get connection.");
		}
		return conn;
	}

	public static void close(Connection conn) {
		if (conn == null)
			return;
		try {
			conn.close();
		} catch (SQLException e) {
			System.out.println("ajax.DBUtils: Cannot close connection.");
		}
	}

	public static void close(Statement stmt) {
		try {
			if (stmt != null) {
				stmt.close();
			}
		} catch (SQLException e) {
			System.out.println("ajax.DBUtils: Cannot close statement.");
		}

	}

	public static void close(ResultSet rs) {
		try {
			if (rs != null) {
				rs.close();
			}
		} catch (SQLException e) {
			System.out.println("ajax.DBUtils: Cannot close resultset.");
		}
	}


}

package com.jzh.control;

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

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

import com.jzh.bean.ShangPin;
import com.jzh.model.ShangPinDAO;

public class FirstMenu extends HttpServlet {

	

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		ShangPinDAO spd=new ShangPinDAO();
		List<ShangPin> list=spd.getFirstClasses();
		request.setAttribute("firstMenu", list);
		request.getRequestDispatcher("/index.jsp").forward(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request,response);
	}

	
}

package com.jzh.control;

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

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

import com.jzh.bean.ShangPin;
import com.jzh.model.ShangPinDAO;

public class ShangpinCServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 设置返回的内容格式和编码方式
		response.setContentType("text/xml;charset=utf-8");
		response.setHeader("Cache-Control", "no-cache");
		String sid = request.getParameter("sid");
		ShangPinDAO sModel = new ShangPinDAO();
		ArrayList<ShangPin> result = sModel.getSecondClasses(sid);
		String xml_start = "<selects>";
		String xml_end = "</selects>";
		String xml = "";
		// 根据请求参数,设置返回的xml格式的字符串
		// 如果所属省份没有指定,返回未绑定
		for (int i = 0; i < result.size(); i++) {
			ShangPin s = result.get(i);
			xml += "<select><value>" + s.getSid() + "</value><text>"
					+ s.getSname() + "</text></select>";
		}
		String last_xml = xml_start + xml + xml_end;
		System.out.println(last_xml);
		PrintWriter out = response.getWriter();
		out.write(last_xml);

	}

}

 
package com.jzh.bean;

public class ShangPin {
	String sid;
	String sname;
	String sbelong_id;
	public String getSid() {
		return sid;
	}
	public void setSid(String sid) {
		this.sid = sid;
	}
	public String getSname() {
		return sname;
	}
	public void setSname(String sname) {
		this.sname = sname;
	}
	public String getSbelong_id() {
		return sbelong_id;
	}
	public void setSbelong_id(String sbelongId) {
		sbelong_id = sbelongId;
	}
}
package com.jzh.model;



import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import com.jzh.bean.ShangPin;
import com.jzh.dbutil.DBUtil;

public class ShangPinDAO {
	public ArrayList<ShangPin> getFirstClasses(){
		ArrayList<ShangPin> result = new ArrayList<ShangPin>();
		Connection conn = null;                 //声明Connection对象
        PreparedStatement pstmt = null;         //声明PreparedStatement对象
        ResultSet rs = null;                    //声明ResultSet对象
        try {
            conn = DBUtil.getConnection();     //获取数据库连接
            pstmt = conn.prepareStatement("select * from shangpin where sid<=3"); //根据sql创建PreparedStatement
            rs = pstmt.executeQuery();          //执行查询,返回结果集
            while(rs.next()) {
            	ShangPin temp = new ShangPin();
            	temp.setSid(rs.getString("sid"));
            	temp.setSname(rs.getString("sname"));
            	temp.setSbelong_id(rs.getString("belong_id"));
                result.add(temp);
            } 
        } catch (SQLException e) {
            System.out.println(e.toString());
        } finally {
            DBUtil.close(rs);         //关闭结果集
            DBUtil.close(pstmt);      //关闭PreparedStatement
            DBUtil.close(conn);       //关闭连接
        }
       
        return result;
	}
	public ArrayList<ShangPin> getSecondClasses(String sid){
		ArrayList<ShangPin> result = new ArrayList<ShangPin>();
		Connection conn = null;                 //声明Connection对象
        PreparedStatement pstmt = null;         //声明PreparedStatement对象
        ResultSet rs = null;                    //声明ResultSet对象
        try {
            conn = DBUtil.getConnection();     //获取数据库连接
            pstmt = conn.prepareStatement("select * from shangpin where belong_id=? and sid!=belong_id"); //根据sql创建PreparedStatement
            pstmt.setInt(1, Integer.valueOf(sid));
            rs = pstmt.executeQuery();          //执行查询,返回结果集
            while (rs.next()) {
            	ShangPin temp = new ShangPin();
            	temp.setSid(rs.getString("sid"));
            	temp.setSname(rs.getString("sname"));
            	temp.setSbelong_id(rs.getString("belong_id"));
                result.add(temp);
            } 
        } catch (SQLException e) {
            System.out.println(e.toString());
        } finally {
            DBUtil.close(rs);         //关闭结果集
            DBUtil.close(pstmt);      //关闭PreparedStatement
            DBUtil.close(conn);       //关闭连接
        }
        return result;
	}

}

数据库表为:




 

                
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现级联选择器的全选和返选功能,可以通过以下步骤来实现: 1. 找到全选和返选的控件,一般是一个复选框。 2. 给全选和返选控件添加事件监听器,在全选控件上添加点击事件,在返选控件上添加双击事件。 3. 在事件监听器中,获取级联选择器的所有子节点,可以通过 DOM 操作或者框架提供的 API 来实现。 4. 根据全选和返选控件的状态,设置级联选择器所有子节点的选中状态。 下面是一个示例代码,假设级联选择器的 ID 是 `cascade-selector`,全选控件的 ID 是 `check-all`,返选控件的 ID 是 `check-back`: ```javascript var cascadeSelector = document.getElementById('cascade-selector'); var checkAll = document.getElementById('check-all'); var checkBack = document.getElementById('check-back'); checkAll.addEventListener('click', function() { var checkboxes = cascadeSelector.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } }); checkBack.addEventListener('dblclick', function() { var checkboxes = cascadeSelector.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = !checkboxes[i].checked; } }); ``` 在上面的代码中,我们使用了 `querySelectorAll` 方法来获取所有的复选框, `checked` 属性来设置复选框的选中状态。在全选事件中,我们将所有的复选框都设置为选中状态,在返选事件中,我们将所有的复选框的选中状态取反。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值