您的位置：首页 > Web前端 > JavaScript

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

2016-06-07 00:10 971 查看


最近在做一个项目，要使用动态下拉二级联动效果。就是当改变新闻大类别后，相应的小类别也要调整。数据库我设置了三个字段（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);
}

}


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

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航