jsp+javascript实现动态下拉二级联动（select+option)

最新推荐文章于 2024-07-22 17:44:20 发布

月夜归醉

最新推荐文章于 2024-07-22 17:44:20 发布

阅读量1.3w

点赞数 3

分类专栏：网站建设

本文链接：https://blog.csdn.net/Lixuanshengchao/article/details/51599141

版权

网站建设专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近在做一个项目，要使用动态下拉二级联动效果。就是当改变新闻大类别后，相应的小类别也要调整。数据库我设置了三个字段（id,name,parentId），因为只做二层目录，所以第一层目录的父节点（parentId)都为-1，第二层目录根据它的parentId可知它的父节点。新闻类别分别从数据库中查询。具体实现代码如下：

前端：

<%@page import="com.enterprise.daoImpl.NodeDaoImpl,com.enterprise.domain.*"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="Inc/Head.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%!
	NodeDaoImpl nodeDaoImpl=new NodeDaoImpl();
	List<Node> list=nodeDaoImpl.getNodes(-1);//获取第一层节点
	String[][] nameString=new String[list.size()][];//定义一个二维数组
	int[][] nameid=new int[list.size()][];
	%>
	<%
	if(list.size()>0)
	for(int i=0;i<list.size();i++)
	{
	 	List<Node> childrenNode=nodeDaoImpl.getNodes(list.get(i).getId());//获取该节点的所有子节点
	 	nameString[i]=new String[childrenNode.size()];
	 	nameid[i]=new int[childrenNode.size()];
	 	if(childrenNode!=null&&childrenNode.size()>0)
	 	for(int j=0;j<childrenNode.size();j++){
	 	
	 		nameString[i][j]=new String(childrenNode.get(j).getClassName());
	 		nameid[i][j]=new Integer(childrenNode.get(j).getId());
	 	}
		
	}
	
/* 	for(int i=0;i<nameString.length;i++){
		for(int j=0;j<nameString[i].length;j++)
		System.out.print(nameString[i][j]);
		System.out.println("");
		} */
 %>

<script language = "JavaScript">


function getChange(){
	var bigClass=document.getElementById("bigClassName");
	var secondClass=document.getElementById("secondClassName");
	secondClass.options.length=1;
	var index=bigClass.selectedIndex;
	<%
		for(int i=0;i<nameString.length;i++){
			%>
			if(index==<%=i%>){
				<%for(int j=0;j<nameString[i].length;j++){%>
				secondClass.options.add(new Option('<%=nameString[i][j]%>','<%=nameid[i][j]%>'))
				
				<%}%>
			}
			
			<%
		}
	%>


}
}

            <td> 
		<select name="news.bigClassName" onChange="getChange();" size="1" id="bigClassName">
		<span style="white-space:pre">	</span><%if(list!=null&&list.size()>0)
			for(Node node:list){
			%>
		
                <span style="white-space:pre">		</span><option selected value="<%=node.getId()%>"><%=node.getClassName()%></option>
                
			<% }%>
               
              </select> <select name="news.secondClassName" id="secondClassName">
                <option value="" selected>不指定小类</option>
              
              </select></td>

后端：

package com.enterprise.daoImpl;

import java.util.List;

import com.enterprise.dao.DAO;
import com.enterprise.dao.NodeDao;
import com.enterprise.domain.Node;

public class NodeDaoImpl extends DAO<Node> implements NodeDao {

	@Override
	public List<Node> getNodes(int id) {
		// TODO Auto-generated method stub
		String sqlString="select * from Node where parentId=?";
		return getForList(sqlString,id);
	}

	@Override
	public int insertNode(Node node) {
		// TODO Auto-generated method stub
		String sql="insert into Node(className,parentId) values(?,?)";
		return executeUpdate(sql, node.getClassName(),node.getParentId());
	}

	@Override
	public int updateNode(Node node) {
		// TODO Auto-generated method stub
		String sqlString="update Node set className=? where id=?";
		return executeUpdate(sqlString, node.getClassName(),node.getId());
	}

	@Override
	public int deleteNode(Node node) {
		// TODO Auto-generated method stub
		String sqlString="delete from Node where id=?";
		return executeUpdate(sqlString, node.getId());
	}

	@Override
	public Node getNode(int id) {
		// TODO Auto-generated method stub
		String sqlString="select * from Node where id=?";
		
		return (Node)get(sqlString, id);
	}
	
}

因为涉及整个项目，代码不能完全提供，仅供参考。