js+jsp实现2级联动选择菜单

最新推荐文章于 2022-07-12 00:32:27 发布
最新推荐文章于 2022-07-12 00:32:27 发布
阅读量528 收藏 1
点赞数
分类专栏： jsp Javascript 文章标签： jsp JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_16297/article/details/82671054
版权 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.myblog.entity.FenLeiTwo" %>
<%	
	List<FenLeiTwo> listFenleiTwo=new ArrayList<FenLeiTwo>();
	List<FenLeiTwo> listFenleiTwo1=(List<FenLeiTwo>)request.getAttribute("fenleiTList1");
	List<FenLeiTwo> listFenleiTwo2=(List<FenLeiTwo>)request.getAttribute("fenleiTList2");
	List<FenLeiTwo> listFenleiTwo3=(List<FenLeiTwo>)request.getAttribute("fenleiTList3");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <title>My JSP 'writeblog.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">
	<script type="text/javascript">
		function selected(obj)
		{

		document.form1.fenleiTwoID.length =  0;//选择清零
		  document.form1.fenleiTwoID.options[0]   =  new  Option('==请选择==','');   //给第一个值       

			if(obj=="1")
			{
				<%listFenleiTwo=listFenleiTwo1;
				 for( int i=0;i<listFenleiTwo.size();i++)
				 {
				FenLeiTwo fenLeiTwo=listFenleiTwo.get(i);
				%>
				 document.form1.fenleiTwoID.options[<%=i+1%>]   =  new  Option('<%=fenLeiTwo.getFenleiTname()%>','<%=fenLeiTwo.getFenleiTname()%>');
				<%
				}
				%>

			}else if(obj=="2")
			{
			<%listFenleiTwo=listFenleiTwo2;
			 for( int i=0;i<listFenleiTwo.size();i++)
				 {
				FenLeiTwo fenLeiTwo=listFenleiTwo.get(i);
				%>
				 document.form1.fenleiTwoID.options[<%=i+1%>]   =  new  Option('<%=fenLeiTwo.getFenleiTname()%>','<%=fenLeiTwo.getFenleiTname()%>');
				<%
				}
				%>
			}
			else if(obj=="3"){ 
			<%listFenleiTwo=listFenleiTwo3;
			 for( int i=0;i<listFenleiTwo.size();i++)
				 {
				FenLeiTwo fenLeiTwo=listFenleiTwo.get(i);
				%>
				 document.form1.fenleiTwoID.options[<%=i+1%>]   =  new  Option('<%=fenLeiTwo.getFenleiTname()%>','<%=fenLeiTwo.getFenleiTname()%>');
				<%
				}
				%>
			}else
			{

			}

		}
	</script>

  </head>

  <body>
  <div align="left">

    	<li class="active" id="xieboke">
    	<form name="form1" >
                <h2>写博客</h2> 博客标题：
                <input type="text" name="">
                <br> 所属类别：

                <select name="fenleiOneID" onchange="selected(this.options[this.options.selectedIndex].value)">
                <option value="0" >--选择类别--</option>
                    <option  value="1">慢生活</option>
                    <option value="2">文章分享</option>
                    <option value="3">闲言碎语</option>
                </select>
                <br>详细分类：
                <select name="fenleiTwoID">
   <option value="0" >==选择类别==</option>
                </select>
                <br> 博客内容：<br>
                <textarea rows="25"  cols="80" wrap="hard"></textarea><br>
                    
                <input type="submit" value="保存内容" >
                </form>
            </li>
            </div>
  </body>
</html>
iteye_16297
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java jsp二级联动_jsp二级联动选择框
weixin_33610780的博客
02-27 170
InfoTab info = (InfoTab) request.getAttribute("info");System.out.println("父地区 id " + info.getParentAreaId());System.out.println("子地区 id " + info.getChildAreaId());System.out.println("父栏目 id " + info.g...
纯JSP+DWR实现三级联动下拉选择菜单实现技巧
10-27
在本文中，我们将探讨如何使用纯JSP和Direct Web Remoting (DWR) 实现一个三级联动下拉选择菜单。这种技术通常用于地理信息系统或组织结构等需要分层次选择的场景，用户可以从一系列相关的下拉菜单中进行选择，每个...
css+JavaScript实现的二级导航菜单html页面前端源码[20225]
mazai5080的博客
07-12 393
本源码编码：20225，需要的朋友，可以下载学习
Jsp之select二级联动
技术刘的博客
01-23 3279
select联动在实际项目中是再熟悉不过了，经常要使用到，每次都要去整理，梳理，会花费一些不必要的时间。然而select标签的使用，在不同的开发中也不一样，比如在vue中跟jsp中，今天主要是梳理在jsp中的应用，vue的使用也是类似。 当然，方法有很多种，下面这种方法是我个人比较经常使用的，需要的朋友可以参考借鉴。 一：假设现在jsp中有两个类别，一级类别和二级类别，二级类别跟随一级类别联动...
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] =
jsp+js实现的二级联动菜单.pdf
09-27
在IT领域，尤其是在Web开发中，二级联动菜单是一种常见的交互设计，用于呈现具有层次关系的数据。这个案例中，我们讨论的是如何使用JSP（JavaServer Pages）和JavaScript来实现这样的功能，以提高用户体验并减少不必...
超简单的ajax+jsp实现2级联动！！
09-17
在这个"超简单的ajax+jsp实现2级联动"的例子中，我们将探讨如何利用AJAX（Asynchronous JavaScript and XML）技术和JavaServer Pages (JSP)来实现这种功能。 首先，我们需要了解AJAX的基本原理。AJAX允许网页在不...
jQuery+jsp实现省市县三级联动效果(附源码)
11-24
在本文中，我们将探讨如何使用jQuery和jsp技术来实现省市县三级联动效果。这个功能常见于需要用户选择详细地址的Web应用中，如电子商务网站、物流系统等。通过这种联动，当用户在一级下拉菜单（例如省份）中选择一个...
jsp+javascript实现动态下拉二级联动（select+option)
月夜归醉
06-07 1万+
最近在做一个项目，要使用动态下拉二级联动效果。就是当改变新闻大类别后，相应的小类别也要调整。数据库我设置了三个字段（id,name,parentId），因为只做二层目录，所以第一层目录的父节点（parentId)都为-1，第二层目录根据它的parentId可知它的父节点。新闻类别分别从数据库中查询。具体实现代码如下： 前端： <%! NodeDaoImpl nodeDaoImpl=
jsp 很实用的JS+CSS多级树形展开菜单_网页代码
07-11
jsp 很实用的JS+CSS多级树形展开菜单_网页代码
使用jsp做的一个二级菜单
01-07
详细且很好看的二级菜单源码，要把文件名改为jsp
JavaScript解析XML实现两级级联下拉列表
03-14
NULL 博文链接：https://linshiquan.iteye.com/blog/292605
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
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值