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

最新推荐文章于 2024-05-16 04:47:02 发布
最新推荐文章于 2024-05-16 04:47:02 发布
阅读量1.3w 收藏 13
点赞数 3
分类专栏： 网站建设
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lixuanshengchao/article/details/51599141
版权

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

 

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

 

 


                

        

        

    




    

      

        

            

              
                
                  月夜归醉
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    3
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    13
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
javascript原生实现二级联动下拉菜单

				
			

			

				

					2201_75604580的博客
				

				

					03-19
					
					451
					
				

			

		

		

			
				
三、 JS简单实现二级联动菜单实现思路：事件源头：城市对应的下拉列表事件属性：选中的值改变 onchange事件监听：根据选择城市展示县区信息核心:监听函数的实现——>根据选中城市展示县区信息var city={tj:[“北辰区”,“西青区”,“武清区”,“和平区”,“滨海新区”],zy:[“红花港区”,“播州区”],bj:[“海淀区”,“朝阳区”,“东城区”]zz:[“二七区”,“金水区”,“中原区”],

			
		

	



                

              
                



	

		

			

				
					
JavaScript之AJAX实现二级联动菜单(jsp+js+servlet

				
			

			

				

					m0_61068496的博客
				

				

					03-16
					
					649
					
				

			

		

		

			
				
else{//当第一个下拉框的选项发生改变时调用该函数if(xhr){//指定回调函数为callback//回调函数}else{//解析返回xml的函数//获得返回的XML文档//获得XML文档中的所有标记//获得网页中的第二个下拉框//每次获得新的数据的时候先把每二个下拉框架的长度清0i++){//获得每个标记中的第一个标记的值,也就是标记的值//获得每个标记中的第二个标记的值,也就是标记的值。

			
		

	



                


  
              

                


	

		

			

				
					
jsp简单二级联动

				
			

			

				

					海洋专栏
				

				

					03-20
					
					1349
					
				

			

		

		

			
				
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>




  
    ">
    
    My JSP 'test.jsp' 

			
		

	





	

		

			

				
					
Ajax 技术学习（JavaEE）—— 实现二级下拉联动

					
最新发布

				
			

			

				

					2401_84584854的博客
				

				

					05-16
					
					936
					
				

			

		

		

			
				
当然在这还有更多整理总结的Java进阶学习笔记和面试题未展示，其中囊括了一、Ajax 实现下拉菜单。

			
		

	



		

			
		



	

		

			

				
					
jsp+js实现的二级联动菜单

					
热门推荐

				
			

			

				

					chuyuqing的专栏
				

				

					05-26
					
					1万+
					
				

			

		

		

			
				
原javascript代码:
          

var subcat = new Array(); 
subcat[0] = new Array('no','大类','12')
subcat[1] = new Array('pinp','楼宇包装','louy') 
subcat[2] = new Array('pinp','会场布置','meet')
subcat[3] =

			
		

	





	

		

			

				
					
js/jsp实现两级级联下拉

				
			

			

				

					YuMi的博客
				

				

					08-13
					
					2991
					
				

			

		

		

			
				
页面代码
						<div class="form-group row">
							<label class="col-sm-2 control-label text-right">一层次原因：</label>
							<div class="col-sm-8">
								<select id="yccyy" name="yccyy" class="form-control select2">
									<op

			
		

	





	

		

			

				
					
如何使用JQuery实现Js二级联动和三级联动

				
			

			

				

					是个非常热爱生活、乐观、奋斗、努力的逗比青年
				

				

					05-27
					
					2153
					
				

			

		

		

			
				
好了，以上代码就是使用JQuery库来实现的上面的二级三级联动，希望多多支持！

			
		

	





	

		

			

				
					
聊聊如何使用Js写一个简单的二级联动和三级联动呢？

				
			

			

				

					是个非常热爱生活、乐观、奋斗、努力的逗比青年
				

				

					05-27
					
					1884
					
				

			

		

		

			
				
js的二级联动和三级联动，有很多种写法，我这种写法只是多种写法中的一种，我个人认为是比较简洁的一种；上面的这些代码多练习几遍也就会写了，也不用死记硬背，理解就好了！实在怕忘记就一键三连吧！哈哈！

			
		

	





	

		

			

				
					
原生js实现二级联动下拉列表菜单

				
			

			

				

					weixin_30314793的博客
				

				

					03-03
					
					602
					
				

			

		

		

			
				
二级联动下拉列表菜单的难点在于对后台返回的数据进行解析，不多逼逼，直接上代码

上图是后台返回的数据
实现代码如下：

var deviceNotExist = true;//防止数据重复
if(data.code == 0) { //查询成功				var param = data.content;				for(i = 0; i < param.length; i...

			
		

	





	

		

			

				
					
jsp+js实现的二级联动菜单.pdf

				
			

			

				

					09-27
				

			

		

		

			
				
他们首先在JSP页面的后台通过Java代码（使用ResultSet对象`rssml`和`rsbig`）从数据库一次性获取所有的一级分类（bigclass）和二级分类（smallclass）数据，然后将这些数据动态地填充到JavaScript数组`subcat`中。...

			
		

	





	

		

			

				
					
实现jsp页面二级下拉框联动，实时读取数据库数据

				
			

			

				

					12-31
				

			

		

		

			
				
实现jsp页面二级下拉框联动，实时读取数据库数据实现jsp页面二级下拉框联动，实时读取数据库数据

			
		

	





	

		

			

				
					
jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.docx

				
			

			

				

					01-20
				

			

		

		

			
				
jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.docx

			
		

	





	

		

			

				
					
JSP+AJAX实现两级select联动  代码

				
			

			

				

					11-05
				

			

		

		

			
				
总结一下，这个"JSP+AJAX实现两级select联动"的项目展示了如何结合服务器端和客户端技术来创建动态、响应式的Web界面。这种联动效果可以应用于各种场景，比如地理选择、商品分类筛选等，极大地提升了用户的操作效率...

			
		

	





	

		

			

				
					
用ajax实现的jsp二级联动下拉列表

				
			

			

				

					12-24
				

			

		

		

			
				
"ajax"代表了异步交互技术，"jsp"表明我们在服务器端使用的是JSP技术，"二级联动"说明了我们处理的是两个下拉列表的关联，而"下拉列表"则是实现这个功能的关键组件。  最后，压缩包中的"pcLink"文件可能是实现这个...

			
		

	





	

		

			

				
					
Ajax+Servlet实现无刷新下拉联动效果

				
			

			

				

					10-18
				

			

		

		

			
				
【Ajax+Servlet实现无刷新下拉联动效果】是一种常见的网页交互技术，主要用于提高用户体验，减少不必要的页面刷新。在本文中，我们将深入探讨如何利用Ajax和Servlet来实现这种功能。  首先，下拉联动的基本原理是在...

			
		

	





	

		

			

				
					
超简单的ajax+jsp实现2级联动！！

				
			

			

				

					09-17
				

			

		

		

			
				
在网页开发中，二级联动是一种常见的交互设计，通常用于下拉菜单或选择框，使得用户在选择一级选项后，二级选项会动态更新以提供相关的子选项。在这个"超简单的ajax+jsp实现2级联动"的例子中，我们将探讨如何利用...

			
		

	





	

		

			

				
					
javascript实现二级联动下拉框

				
			

			

				

					weixin_33973609的博客
				

				

					07-17
					
					62
					
				

			

		

		

			
				
http://www.blogjava.net/rickhunter/articles/64607.html
				
转载于:https://blog.51cto.com/huqianhao/953230

			
		

	





	

		

			

				
					
js实现二级下拉联动

				
			

			

				

					
				

				

					12-16
					
					641
					
				

			

		

		

			
				
无标题文档



 
  
  
   上海  
   苏州  
  
  
  
   浦东新区    
徐汇 
长宁 
普陀 
闸北 
虹口 
杨浦 
黄浦 
卢湾 
静安 
宝山 
闵行 
嘉定 
金山 
松江 
青浦 
南汇 
奉贤 
崇明 

  
  
  
  
function change()  
{  
   var x = document.getElementById("c

			
		

	





	

		

			

				
					
jsp ajax三级联动,Spring MVC+JSP实现三级联动

				
			

			

				

					06-06
				

			

		

		

			
				
实现三级联动的基本思路是通过Ajax技术实现异步请求后端数据，然后动态生成页面元素实现级联效果。下面是一个Spring MVC+JSP实现三级联动的示例代码：

1. 前端JSP页面

```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动示例</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // 加载省份列表
    $.ajax({
        url: "${pageContext.request.contextPath}/province",
        type: "GET",
        success: function(data){
            var provinceList = JSON.parse(data);
            var html = "";
            for(var i=0; i<provinceList.length; i++){
                html += "<option value='"+provinceList[i].id+"'>"+provinceList[i].name+"</option>";
            }
            $("#province").html(html);
        }
    });
    
    // 根据省份id加载城市列表
    $("#province").change(function(){
        var provinceId = $(this).val();
        $.ajax({
            url: "${pageContext.request.contextPath}/city/"+provinceId,
            type: "GET",
            success: function(data){
                var cityList = JSON.parse(data);
                var html = "";
                for(var i=0; i<cityList.length; i++){
                    html += "<option value='"+cityList[i].id+"'>"+cityList[i].name+"</option>";
                }
                $("#city").html(html);
            }
        });
    });
    
    // 根据城市id加载区县列表
    $("#city").change(function(){
        var cityId = $(this).val();
        $.ajax({
            url: "${pageContext.request.contextPath}/district/"+cityId,
            type: "GET",
            success: function(data){
                var districtList = JSON.parse(data);
                var html = "";
                for(var i=0; i<districtList.length; i++){
                    html += "<option value='"+districtList[i].id+"'>"+districtList[i].name+"</option>";
                }
                $("#district").html(html);
            }
        });
    });
});
</script>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>
    <select id="district">
        <option value="">请选择区县</option>
    </select>
</body>
</html>
```

2. 后端Controller代码

```java
@Controller
public class RegionController {
    
    @Autowired
    private RegionService regionService;
    
    @RequestMapping(value="/province", method=RequestMethod.GET)
    @ResponseBody
    public String getProvinceList(){
        List<Province> provinceList = regionService.getProvinceList();
        return JSON.toJSONString(provinceList);
    }
    
    @RequestMapping(value="/city/{provinceId}", method=RequestMethod.GET)
    @ResponseBody
    public String getCityList(@PathVariable("provinceId") String provinceId){
        List<City> cityList = regionService.getCityList(provinceId);
        return JSON.toJSONString(cityList);
    }
    
    @RequestMapping(value="/district/{cityId}", method=RequestMethod.GET)
    @ResponseBody
    public String getDistrictList(@PathVariable("cityId") String cityId){
        List<District> districtList = regionService.getDistrictList(cityId);
        return JSON.toJSONString(districtList);
    }
}
```

3. Service层代码

```java
@Service
public class RegionServiceImpl implements RegionService {
    
    @Autowired
    private RegionDao regionDao;

    @Override
    public List<Province> getProvinceList() {
        return regionDao.getProvinceList();
    }

    @Override
    public List<City> getCityList(String provinceId) {
        return regionDao.getCityList(provinceId);
    }

    @Override
    public List<District> getDistrictList(String cityId) {
        return regionDao.getDistrictList(cityId);
    }
}
```

4. DAO层代码

```java
@Repository
public class RegionDaoImpl implements RegionDao {

    @Autowired
    private JdbcTemplate jdbcTemplate;

    @Override
    public List<Province> getProvinceList() {
        String sql = "select province_id, province_name from tb_province";
        List<Province> provinceList = jdbcTemplate.query(sql, new BeanPropertyRowMapper<Province>(Province.class));
        return provinceList;
    }

    @Override
    public List<City> getCityList(String provinceId) {
        String sql = "select city_id, city_name from tb_city where province_id=?";
        List<City> cityList = jdbcTemplate.query(sql, new Object[]{provinceId}, new BeanPropertyRowMapper<City>(City.class));
        return cityList;
    }

    @Override
    public List<District> getDistrictList(String cityId) {
        String sql = "select district_id, district_name from tb_district where city_id=?";
        List<District> districtList = jdbcTemplate.query(sql, new Object[]{cityId}, new BeanPropertyRowMapper<District>(District.class));
        return districtList;
    }
}
```

其中Province、City和District是数据实体类，包含id和name两个属性。以上代码只是一个简单示例，实际项目中需要根据具体需求进行修改和完善。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
月夜归醉

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值