js实现级联菜单及传值到后台

最新推荐文章于 2023-05-20 09:33:14 发布

Mike_Stu

最新推荐文章于 2023-05-20 09:33:14 发布

阅读量1.1k

点赞数

分类专栏： springmvc 文章标签： js 级联菜单 hidden

springmvc 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

今天导师还没来，我就自己安排学习的内容，由于后面的毕业设计要用到级联菜单，就先在网上学习了一个简单的版本（先前听说过可以用ajax实现，但是没接触过ajax，想先把功能做出来再优化）。

参考资料写了一个选择省市的菜单，但是传到后台的是option的value而不是text，所以后面又用hidden改变值。

参考资料：

JS实现省、市级联效果菜单
https://www.cnblogs.com/taoxiaoji/archive/2010/12/06/1897640.html
怎么把Javascript里的值传入后台
https://zhidao.baidu.com/question/273658842.html
js获取select标签选中的值
https://www.cnblogs.com/qq3245792286/p/6390504.html

前端页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A menu of address!</title>
<script>
 function provinceList(){
	 this.length=2;
	 this[0]=new Option("安徽","0");
	 this[1]=new Option("北京","1");
	 return this;
 }
 function cityList(){
	 this.length=2;
	 this[0]=new Array(3);
	 this[0][0]=new Option("合肥市","0");
	 this[0][1]=new Option("淮北市","1");
	 this[0][2]=new Option("淮南市","2");
	 
	 this[1]=new Array(1);
	 this[1][0]=new Option("北京市","100");
	 return this;
 }
 //创建provinceList、cityList类实例
 var provinceObj=new provinceList();
 var cityObj=new cityList();
 //定义province、city变量，用于select元素
 var province, city;
 //子函数添加、删除城市
 function addCitys(province,city){
	 var index=province.selectedIndex;
	 for(var i=0;i<cityObj[index].length;i++){
		 try{
			 city.add(cityObj[index][i]);
		 }catch(e){
			 city.add(cityObj[index][i],null);
		 }
	 }
 }
 function delCitys(city){
	 city.length=0;
 }
 //初始化地区下拉菜单
 function initialize(provinceId, cityId){
	 //获取select元素
	 province=document.getElementById("province");
	 city=document.getElementById("city");
	 //循环添加省份到province
	 for(var i=0;i<provinceObj.length;i++){
		 try{
			 province.add(provinceObj[i]);
		 }catch(e){
			 province.add(provinceObj[i],null);
		 }
	 }
	 //初始化provinceId
	 if(provinceId==undefined){
		 provinceId=0;
	 }
	 //设置province默认选项
	 province.options[provinceId].selected=true;
	 //添加城市到city
	 addCitys(province,city);
	 //设置city的默认选项
	 if(cityId!=undefined){
		 city.options[cityId].selected=true;
	 }else{
		 city.options[0].selected=true;
	 }
 }
 //下拉列表改变事件
 function selectchange(province, city){
	 delCitys(city);
	 addCitys(province,city);
 }
</script>
<script type="text/javascript">
		function getText() {//function1
			var province_obj = document.getElementById("province"); //定位id
			var province_index = province_obj.selectedIndex; // 选中索引
			var province_text = province_obj.options[province_index].text; // 选中文本 
			var city_obj = document.getElementById("city");
			var city_index = city_obj.selectedIndex;
			var city_text = city_obj.options[city_index].text;
				document.getElementById("province_h").value=province_text;
				document.getElementById("city_h").value=city_text;			    
				//var href=$(this).attr("href");
				//$("form").attr("action",href).submit();
				document.forms.areaForm.submit() ;
		}
</script>
</head>
<body οnlοad="javascript:initialize();">
<form action="" method="post">
 <input type="hidden" name="_method" value="post">
</form>
<form action="chooseArea" method="post" name="areaForm">
	<select id="country">
		<option value="0">-=请选择国家=-</option>
		<option value="1">中国</option>
	</select>
	<select id="province" οnchange="javascript:selectchange(province,city);"></select>
	<select id="city"></select>
	<input type="hidden" id="province_h" name="province_h" value="">
	<input type="hidden" id="city_h" name="city_h" value="">
	<input type="button" value="确定" οnclick="getText()">
</form>
</body>
</html>

后端代码：

        @RequestMapping("/toChooseArea")
	public String toChooseArea(Map<String, Area> map){
		map.put("area", new Area());
		return "area";
	}
	
	@RequestMapping(value="/chooseArea", method=RequestMethod.POST)
	public String chooseArea(HttpServletRequest request, Map<String, Area> map){
		String province=request.getParameter("province_h");
		System.out.println(province);
		String city=request.getParameter("city_h");
		Area area=new Area(request.getParameter("province_h"),request.getParameter("city_h"));
		map.put("area", area);
		return "printArea";
	}

打印页面：

Mike_Stu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现级联菜单及传值到后台

今天导师还没来，我就自己安排学习的内容，由于后面的毕业设计要用到级联菜单，就先在网上学习了一个简单的版本（先前听说过可以用ajax实现，但是没接触过ajax，想先把功能做出来再优化）。参考资料写了一个选择省市的菜单，但是传到后台的是option的value而不是text，所以后面又用hidden改变值。参考资料：JS实现省、市级联效果菜单https://www.cnb...
复制链接

扫一扫