三级联动选择框

最新推荐文章于 2024-04-27 09:13:51 发布
最新推荐文章于 2024-04-27 09:13:51 发布
阅读量493 收藏
点赞数 1
分类专栏： 功能块 文章标签： java html5 javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61122802/article/details/119853480
版权

本案例的三级联动选择数据框数据来源于数据库，需要和数据库配合使用

运行效果

 HTML页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<c:if test="${empty user }">
      <%
      response.sendRedirect(request.getContextPath() + "/user?method=gotologin");
      %>
</c:if>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>欢迎页面-L-admin1.0</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath }/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/xadmin.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/checkbox_radio.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/xadmin.js"></script> 
    
    <!-- 文本框相关部件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/wenbenkuang/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/wenbenkuang/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/wenbenkuang/dist/bootstrap3-wysihtml5.all.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/wenbenkuang/dist/locales/bootstrap-wysihtml5.zh-CN.js"></script>
  </head>
  <body>
   <form method="post"  action="${pageContext.request.contextPath }/intostock?method=intostockadd" >  
    <input type="hidden" name="level" value="0">
            <div >
                <table>              
                    <tr >
                            <th style="width: 142px;">
                                <p style="margin-right: 10px; margin-top: 10px;font-size: 18px;font-family: 楷体;float: right;"><span style="color: red;" >*</span>隶属一级分类</p>
                            </th>
                            <td>
                                <select style=" margin-top: 10px;width: 230px;height: 36px;padding-left: 10px; font-size: 16px;"  id="firstclassificationid"  name="firstclassificationid"  value="" required >	
                                    <option value="">--请选择--</option>
                                </select>
                                
                            </td>
                    </tr> 
                    <tr>
                            <th style="width: 142px;">
                                <p style="margin-right: 10px;margin-top: 10px;font-size: 18px;font-family: 楷体;float: right;"><span style="color: red;">*</span>隶属二级分类</p>
                            </th>
                            <td>
                                <select style="margin-top: 10px;width: 230px;height: 36px;padding-left: 10px; font-size: 16px;"  id="twoclassificationid"  name="twoclassificationid"  value="" required >
                                    <option  value="">--请选择--</option>
                                </select>
                            </td>
                    </tr> 
                     <tr >
                            <th style="width: 142px;">
                                <p style="margin-right: 10px; margin-top: 10px;font-size: 18px;font-family: 楷体;float: right;"><span style="color: red;" >*</span>物品名称</p>
                            </th>
                            <td>
                                <select style=" margin-top: 10px;width: 230px;height: 36px;padding-left: 10px; font-size: 16px;"  id=goodsid  name="goodsid"  value="" required >	
                                    <option value="">--请选择--</option>
                                </select>
                                
                            </td>
                    </tr> 
                    <tr>
                            <th style="width: 142px;">
                                <p style="margin-right: 10px;margin-top: 10px;font-size: 18px;font-family: 楷体;float: right;"><span style="color: red;">*</span>入库类型</p>
                            </th>
                            <td>
                               <!--  <select style="margin-top: 10px;width: 230px;height: 36px;padding-left: 10px; font-size: 16px;"  id="intostocktype"  name="intostocktype"  value="" required onblur='checkName(this)' > -->
                                     <select style="margin-top: 10px;width: 230px;height: 36px;padding-left: 10px; font-size: 16px;"  id="intostocktype"  name="intostocktype"  value="" required  >
                                   <option value="">--请选择--</option>
                                   <c:forEach items="${list}" var="p">
                                     <option value="${p.intostocktypename}">${p.intostocktypename}</option>
                                  </c:forEach> 
                                   
                                   
                                </select>
                            </td>
                    </tr> 
                    <tr>
                            <th style="width: 142px;">
                                <p style="margin-right: 10px;margin-top: 10px;font-size: 18px;font-family: 楷体;float: right;"><span style="color: red;">*</span>入库数量</p>
                            </th>
                            <td>
                                <input style=" margin-top: 10px;width: 220px;height: 30px;padding-left: 10px; font-size: 16px;" type="text"  name="intonum"  name="intonum"  value="1"  readonly  required>                                                        
				               
             
                            </td>
                    </tr> 
                   
                  

                </table>

                   
            </div>
            <div >
                <button style="width: 388px;margin-left: 10px ;margin-top: 10px; font-size:30px; font-family:楷体; font-weight: 900; background-color: #0dc316;" id="sub"  type="submit" > 确定入库 </button>
            
            
            </div>            
        </form>
        
        
  </body>
  
  <script type="text/javascript">
  

	//失去焦点 发送ajax
	function checkName(obj){
		alert(obj.value)
		
		}
		
		


  




  
  //只要DOM就绪就会执行，进行异步处理    
  $(document).ready(function(){
      //声明一个全局变量，保存执行异步后获取的map对象
      var FIRSTDATE = null;

      $.ajax({
          type: "GET",
          url:"${pageContext.request.contextPath }/intostock?method=getClass",
          dataType:"json",
          success: function (firstdata) {
              //将获取的值赋值给全局变量，因为这个返回的对象要在一级菜单改变时使用，
              //所以需要扩大他的范围
              FIRSTDATE = firstdata;
              //输出打印
              console.log(firstdata);
              var grade=$("#firstclassificationid");
              for(var key in firstdata){
                  //输出打印
                  console.log("属性：" + key + "====================");
                  //根据key去取值，获得List对象
                  var list = firstdata[key];
                  //遍历这个List对象
                  for(var j = 0; j < list.length; j++){
                      var obj = list[j];
                      //一会在下面控制器代码中可以看的出来，保存map对象时，
                      //一级菜单保存的key值为0
                      //二级菜单保存为0_...
                      if(key=="0"){
                          console.log(obj);
                          //添加一级下拉菜单
                          grade.append("<option value="+obj.id+">"+obj.firstclassificationname+"</option>"); 
                      }else{
                          console.log(obj);
                      }
                  }
              }
          },
          error: function (firstdata) {
              console.log("失败")
          }
      });

      //一级菜单的改变事件
      $("#firstclassificationid").change(function(){
          var str = $("#firstclassificationid").val();
          $("#twoclassificationid").empty();
          $("#twoclassificationid").append("<option value=''>--请选择--</option>");
          if(str != "null"){
              //遍历全局变量
              for(var key in FIRSTDATE){
                  var list = FIRSTDATE[key];
                  for(var j = 0; j < list.length; j++){
                      var obj = list[j];
                      //判断并填充值
                      if(key!="0" && key=="1"+ str){
                          //输出打印
                          console.log(obj);
                          //添加二级下拉菜单
                          $("#twoclassificationid").append("<option value="+obj.id+">"+obj.twoclassificationname+"</option>"); 
                      }
                  }
              }
          }
      }); 

  //二级菜单的改变事件
  $("#twoclassificationid").change(function(){
      var str = $("#twoclassificationid").val();
      $("#goodsid").empty();
      $("#goodsid").append("<option value=''>--请选择--</option>");
      if(str != "null"){
          //遍历全局变量
          for(var key in FIRSTDATE){
              var list = FIRSTDATE[key];
              for(var j = 0; j < list.length; j++){
                  var obj = list[j];
                  //判断并填充值
                  if(key!="1" && key=="2"+ str){
                      //输出打印
                      console.log(obj);
                      //添加二级下拉菜单
                      $("#goodsid").append("<option value="+obj.id+">"+obj.goodsname+"</option>"); 
                  }
              }
          }
      }
  }); 

  });


  
  
    </script>
</html>

后台查询数据库部分

/* 查询一级分类和二级分类以及物品名称 */
	@SuppressWarnings({ "rawtypes" })
	public void getClass(HttpServletRequest request, HttpServletResponse response) throws Exception {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		Map<String, List> map = new HashMap<String, List>();
		FirstclassificationService firstservice = new FirstclassificationServiceImpl();
		List<Firstclassification> firstss = firstservice.findFirstList();
		map.put("0", firstss);
		for (int i = 0; i < firstss.size(); i++) {
			Firstclassification lirst = (Firstclassification) firstss.get(i);
			String id = lirst.getId();
			TwoclassificationService secondservice = new TwoclassificationServiceImpl();
			List<Twoclassification> secondss = secondservice.findSecondList(id);
			map.put("1" + id, secondss);

			for (int k = 0; k < secondss.size(); k++) {
				Twoclassification Tlist = (Twoclassification) secondss.get(k);
				String Tid = Tlist.getId();
				GoodsService goodss = new GoodsServiceImpl();
				List<Goods> goods = goodss.findGoodsList(Tid);
				map.put("2" + Tid, goods);
			}

		}
		// 输出返回
		PrintWriter out = response.getWriter();
		// 调用gson的方法将对象打为Json数据格式(字符串)
		Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
		String firstdata = gson.toJson(map);
		out.write(firstdata);// 这里括号中的参数是在页面中要获取的值，是同名的

	}

我若心飞扬，天地任我逍遥
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
市县两个选择框联动
saltlike的博客
11-04 313
问题描述： 遇到一个需求，就是市和县要做成两个选择框，并保持它们数据的联动。使用vue + element ui的实现方法如下： <template> <div class="app-container"> <el-form label-position="left" ref="form" :model="form" label-width="40px"> <el-row> <el-col :span="
js实现一个省市区三级联动选择框代码分享
10-27
省市区三级联动在填写表单时有关地址这一块显得尤为重要,直接提高了用户的填写速度与准确度，接下来本文使用js代码实现一个，感兴趣的你可以参考下希望可以帮助到你
学习编程第11章` jsp+js+ssm`三级联动菜单
qq_35255901的博客
12-21 175
学习编程第11章jsp+js+ssm三级联动菜单 项目![ 第一次打开django 要下载 需要等待一会 建立视图 jsp <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt...
下拉框三级联动
qq_65102318的博客
03-28 326
下拉框模型关联 // 定义商品-商品分类关联 一个商品属于一个分类 public function category() { return $this->belongsTo('Category','cate_id','id')->bind('cate_name'); } // 定义商品品牌关联，一个商品对应一个品牌 public function brand() { return $this->belo
三级联动以及下拉框回显
qq_35733604的博客
05-13 827
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <!DOCTYPE htm..
JavaScript之实现select下拉选择框的联动
yusuhbdybxbdhj的博客
07-09 1695
这段代码的作用是实现了一个省市选择的联动功能，当选择了一个省份后，对应的城市会显示在城市选择框中。每次选择不同的省份，城市选择框的选项会动态地改变。
JeecgBoot页面级联选择框(三种方法)
m0_55841258的博客
06-02 2318
（已实践）（已实践）（简单测试，只贴代码，不做过多说明）
select三级联动选择—基于layui的select
努力学习Java的彬彬的博客
04-10 5056
三级联动选择
三级下拉选择框——三级联动
寨板p45黑苹果10.12.6
05-18 433
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。 as前面为真实值，后面为显示值。 ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。 ng-options="item.id as item.name for item in selectItemCat1List" item in selectIte..
layui实现下拉框三级联动
10-16
主要为大家详细介绍了layui实现下拉框三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
三联选择插件
04-11
三联选择的，将左端数据选择到右侧框里面。有点击选择，右移，上移，下移，全部右移，全部删除，保存，取消功能
三级联动 地区 选择框
03-28
比较好用的三级地区联动代码，例子完整
jQuery移动端省市区三级联动选择框
06-01
仿淘宝移动端收货地址省市区的选择面板
Select框下拉城市三级联动代码
06-24
Select框下拉城市三级联动代码是一款支持中文拼音搜索城市功能的三级联动城市选择器。
mybatisPlus使用MetaObjectHandler对字段进行更新
m0_56356631的博客
04-23 737
都是符合我们的预期的。
java方法重写（重点讲），方法重载
最新发布
weixin_46281068的博客
04-27 820
一、方法重载定义：一个类中，出现多个方法的名称相同，但是它们的形参列表是不同的，那么这些方法就称为方法重载了。注意：一个类中，只要一些方法的名称相同、形参列表不同，那么它们就是方法重载了，其它的都不管（如:修饰符，返回值类型是否一样都无所谓）。形参列表不同指的是:形参的个数、类型、顺序不同，不关心形参的名称。应用场景：开发中我们经常需要为处理一类业务，提供多种解决方案，此时用方法重载来设计是很专业的。
string模拟实现
m0_73969414的博客
04-23 1733
c++中string的模拟实现，面试必会知识点
实现自定义注解、实现自定义幂等性注解
qq_44721738的博客
04-23 1004
添加 Spring AOP 依赖。创建自定义注解。创建一个新的 Java 注解类，通过@interface关键字来定义，并可以添加元注解以及属性。@Target(ElementType.METHOD) //表示作用于方法上@Retention(RetentionPolicy.RUNTIME) // 表示这个注解在运行时是可见的，这样 AOP 代理才能在运行时读取到这个注解编写 AOP 拦截（自定义注解）的逻辑代码。@Aspect@Component// 方法执行前的处理。
PageHelper实现分页查询
m0_63849044的博客
04-24 1051
这行代码是在使用 MyBatis Generator (MBG) 或类似的 MyBatis 工具生成的代码来构建查询条件。（可能是MyBatis的Mapper接口）来执行基于前面定义的查询条件的查询，并获取结果列表。实例之后会被用来设置各种查询条件，如字段的等于、不等于、大于、小于、模糊查询等。实体类生成的辅助类，它通常包含了一些静态内部类和方法，用于构建查询条件。在MyBatis中，这样的对象通常用于构建查询条件。对象，可能用于作为查询条件）。的一个内部类，用于定义查询的具体条件。
html三级联动地区选择框
05-20
三级联动地区选择框 window.onload=function(){ var province=document.getElementById("province"); var city=document.getElementById("city"); var district=document.getElementById("district...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我若心飞扬，天地任我逍遥

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值