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

下面是详细的“jsp从数据库获取数据填充下拉框实现二级联动菜单的方法”攻略。

第一步:创建数据表

首先,我们需要创建一个数据表,用于存储下拉菜单中的选项值和对应的子选项值。例如,我们可以创建一个名为“options”的表,它包含以下字段:

  • optionId:选项的ID
  • optionName:选项的名称
  • subOptionId:子选项的ID
  • subOptionName:子选项的名称
  • parentId:父选项的ID

第二步:编写JSP页面

接下来,我们需要编写一个JSP页面,用于展示下拉菜单并实现二级联动菜单的效果。例如,我们可以创建一个名为“index.jsp”的页面,并添加以下代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>二级联动菜单</title>
</head>
<body>
  <label for="parentOption">父选项:</label>
  <select id="parentOption" name="parentOption">
    <%-- 此处填写从数据库获取选项值的代码 --%>
  </select>
  <br><br>
  <label for="subOption">子选项:</label>
  <select id="subOption" name="subOption">
    <%-- 此处填写从数据库获取子选项值的代码 --%>
  </select>
</body>
</html>

在代码中,我们创建了两个下拉菜单,一个用于展示父选项,一个用于展示子选项。我们需要通过从数据库获取选项值的代码填充父选项下拉菜单,以及通过从数据库获取子选项值的代码填充子选项下拉菜单。

第三步:编写数据库查询语句

接下来,我们需要编写SQL语句,从数据库中获取选项值和子选项值。例如,我们可以创建以下查询语句:

SELECT * FROM options WHERE parentId IS NULL; -- 获取所有父选项值
SELECT * FROM options WHERE parentId = ?; -- 获取某个父选项对应的所有子选项值

其中,“?”是一个占位符,需要在JSP页面中通过Java代码设置。

第四步:编写Java代码

最后,我们需要编写Java代码,用于执行数据库查询和设置下拉菜单选项值。例如,我们可以创建以下Java方法:

public static List<Option> getAllParentOptions() {
  List<Option> options = new ArrayList<>();
  try {
    Connection conn = DataSourceUtils.getConnection();
    PreparedStatement ps = conn.prepareStatement("SELECT * FROM options WHERE parentId IS NULL");
    ResultSet rs = ps.executeQuery();
    while (rs.next()) {
      Option option = new Option();
      option.setId(rs.getInt("optionId"));
      option.setName(rs.getString("optionName"));
      options.add(option);
    }
    rs.close();
    ps.close();
  } catch (SQLException e) {
    e.printStackTrace();
  } finally {
    DataSourceUtils.releaseConnection();
  }
  return options;
}

public static List<Option> getSubOptionsByParentId(int parentId) {
  List<Option> options = new ArrayList<>();
  try {
    Connection conn = DataSourceUtils.getConnection();
    PreparedStatement ps = conn.prepareStatement("SELECT * FROM options WHERE parentId = ?");
    ps.setInt(1, parentId);
    ResultSet rs = ps.executeQuery();
    while (rs.next()) {
      Option option = new Option();
      option.setId(rs.getInt("subOptionId"));
      option.setName(rs.getString("subOptionName"));
      options.add(option);
    }
    rs.close();
    ps.close();
  } catch (SQLException e) {
    e.printStackTrace();
  } finally {
    DataSourceUtils.releaseConnection();
  }
  return options;
}

以上代码中,我们创建了两个方法:一个用于获取所有的父选项值,另一个用于获取某个父选项对应的所有子选项值。需要注意的是,我们还需要创建一个Option类,用于封装选项值和子选项值的信息。

示例说明

接下来,我们以两个示例来说明如何实现二级联动菜单。

示例一:省市区联动菜单

假设我们要创建一个省市区联动菜单,其中省份作为父选项,城市和区县作为子选项。

首先,我们需要创建一个MySQL数据表,并且添加以下数据:

optionId optionName subOptionId subOptionName parentId
1 四川省 101 成都市 NULL
2 四川省 102 绵阳市 NULL
3 福建省 201 福州市 NULL
4 福建省 202 厦门市 NULL
101 成都市 10101 锦江区 101
101 成都市 10102 青羊区 101
101 成都市 10103 金牛区 101
102 绵阳市 10201 涪城区 102
102 绵阳市 10202 游仙区 102
102 绵阳市 10203 安州区 102
201 福州市 20101 鼓楼区 201
201 福州市 20102 台江区 201
201 福州市 20103 仓山区 201
202 厦门市 20201 思明区 202
202 厦门市 20202 湖里区 202
202 厦门市 20203 集美区 202

其次,我们需要编写以下代码来展示联动菜单:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>省市区联动菜单</title>
</head>
<body>
  <label for="province">省份:</label>
  <select id="province" name="province">
    <%
      List<Option> provinces = DbUtil.getAllParentOptions();
      for (Option province : provinces) {
    %>
      <option value="<%=province.getId()%>"><%=province.getName()%></option>
    <%
      }
    %>
  </select>
  <br><br>
  <label for="city">城市:</label>
  <select id="city" name="city">
  </select>
  <br><br>
  <label for="district">区县:</label>
  <select id="district" name="district">
  </select>
  <br><br>
  <script>
    var province = document.getElementById("province");
    var city = document.getElementById("city");
    var district = document.getElementById("district");
    province.addEventListener("change", function() {
      var parentId = this.value;
      city.innerHTML = "";
      district.innerHTML = "";
      if (parentId) {
        fetch("/getSubOptions?parentId=" + parentId).then(function(response) {
          return response.json();
        }).then(function(data) {
          for (var i = 0; i < data.length; i++) {
            var option = document.createElement("option");
            option.value = data[i].id;
            option.text = data[i].name;
            city.add(option);
          }
        });
      }
    });
    city.addEventListener("change", function() {
      var parentId = this.value;
      district.innerHTML = "";
      if (parentId) {
        fetch("/getSubOptions?parentId=" + parentId).then(function(response) {
          return response.json();
        }).then(function(data) {
          for (var i = 0; i < data.length; i++) {
            var option = document.createElement("option");
            option.value = data[i].id;
            option.text = data[i].name;
            district.add(option);
          }
        });
      }
    });
  </script>
</body>
</html>

以上代码中,我们首先展示了“省份”下拉菜单,然后在通过Java代码获取所有的省份选项值,并在页面中动态添加下拉菜单选项。接着,我们监听“省份”下拉菜单的change事件,当选中一个省份时,我们通过fetch API发起一个请求,获取该省份对应的城市列表,并在页面中动态添加“城市”下拉菜单选项。最后,当选中一个城市时,我们再次通过fetch API发起请求,获取该城市对应的区县列表,并在页面中动态添加“区县”下拉菜单选项。

示例二:手机品牌型号联动菜单

假设我们要创建一个手机品牌型号联动菜单,其中手机品牌作为父选项,手机型号作为子选项。

首先,我们需要创建一个SQLite3数据表,并且添加以下数据:

optionId optionName subOptionId subOptionName parentId
1 苹果 101 iPhone 11 Pro NULL
2 苹果 102 iPhone 11 NULL
3 华为 201 Mate 30 Pro NULL
4 华为 202 P30 Pro NULL
101 iPhone 11 10101 64GB 101
101 iPhone 11 10102 128GB 101
101 iPhone 11 10103 256GB 101
102 iPhone 11 10201 64GB 102
102 iPhone 11 10202 128GB 102
201 Mate 30 Pro 20101 8GB+256GB 201
201 Mate 30 Pro 20102 8GB+512GB 201
202 P30 Pro 20201 6GB+128GB 202
202 P30 Pro 20202 6GB+256GB 202

其次,我们需要编写以下代码来展示联动菜单:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>手机品牌型号联动菜单</title>
</head>
<body>
  <label for="brand">手机品牌:</label>
  <select id="brand" name="brand">
    <%
      List<Option> brands = DbUtil.getAllParentOptions();
      for (Option brand : brands) {
    %>
      <option value="<%=brand.getId()%>"><%=brand.getName()%></option>
    <%
      }
    %>
  </select>
  <br><br>
  <label for="model">手机型号:</label>
  <select id="model" name="model">
  </select>
  <br><br>
  <script>
    var brand = document.getElementById("brand");
    var model = document.getElementById("model");
    brand.addEventListener("change", function() {
      var parentId = this.value;
      model.innerHTML = "";
      if (parentId) {
        fetch("/getSubOptions?parentId=" + parentId).then(function(response) {
          return response.json();
        }).then(function(data) {
          for (var i = 0; i < data.length; i++) {
            var option = document.createElement("option");
            option.value = data[i].id;
            option.text = data[i].name;
            model.add(option);
          }
        });
      }
    });
  </script>
</body>
</html>

以上代码中,我们首先展示了“手机品牌”下拉菜单,然后通过Java代码获取所有的手机品牌选项值,并在页面中动态添加下拉菜单选项。接着,我们监听“手机品牌”下拉菜单的change事件,当选中一个手机品牌时,我们通过fetch API发起一个请求,获取该品牌对应的手机型号列表,并在页面中动态添加“手机型号”下拉菜单选项。

结语

以上就是“jsp从数据库获取数据填充下拉框实现二级联动菜单的方法”的详细攻略。通过以上步骤,我们可以轻松实现二级联动菜单,并且可以通过修改数据库中的数据来扩展菜单的选项值。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jsp从数据库获取数据填充下拉框实现二级联动菜单的方法 - Python技术站

(0)
上一篇 2023年6月15日
下一篇 2023年6月15日

相关文章

  • Java基础之switch分支结构详解

    Java基础之switch分支结构详解 在Java中,switch分支结构是一种多分支的逻辑结构。相比于if-else语句,它对于多个分支的情况更加简洁易读,是Java程序设计中常用的结构之一。 switch语句的基本格式 switch语句的基本格式如下: switch (expression) { case value1: // case1 code br…

    Java 2023年5月26日
    00
  • JAVA实现caesar凯撒加密算法

    下面是“JAVA实现Caesar凯撒加密算法”的完整攻略: 凯撒加密算法简介 Caesar凯撒加密算法是最常见、最简单的加密算法之一,它是一种替换加密的方式,即用字母表中某个固定数目的后续字母来替换原文中的字母。例如,当加密密钥为3时,所有的字母都会向后移位三个位置,即A变为D,B变为E,以此类推。解密则是反向移动相同的位数。 Java实现Caesar凯撒加…

    Java 2023年5月19日
    00
  • 微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

    下面我将为你详细讲解“微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能”的完整攻略。 实现多选框全选与反全选 HTML结构 首先,在购物车页面的HTML结构中,给每一个商品前面加上一个多选框。例如: <view class="cart-item"> <checkbox class="checkbox…

    Java 2023年5月23日
    00
  • Spring quartz Job依赖注入使用详解

    Spring Quartz Job依赖注入使用详解 介绍 Spring框架提供了一个任务调度组件——Quartz。Quartz可用于在指定时间、日期执行任务或按规定时间间隔执行任务,比如定时备份、数据同步等任务。 在Quartz中定义任务的时候,我们可能需要依赖注入一些Spring管理的Bean,通过Spring支持的依赖注入特性,Quartz任务类很容易获…

    Java 2023年6月15日
    00
  • spring-mybatis获取mapper的四种方式汇总

    下面是对于“spring-mybatis获取mapper的四种方式汇总”的完整攻略。 1. 前言 在 Spring 中使用 Mybatis 时,我们需要获取Mapper类,通俗点来讲就是要实例化一个Mapper类对象,从而调用方法去操作数据库。 Spring-Mybatis 提供了四种方式来获取Mapper类实例化对象。 这四种方式是: 通过 SqlSess…

    Java 2023年5月19日
    00
  • java 中函数的参数传递详细介绍

    Java 中函数的参数传递详细介绍 在 Java 中,函数参数的传递方式有两种,分别是值传递和引用传递。本文将详细介绍这两种传递方式,并给出两个示例说明。 值传递 值传递是指,在调用函数时,将实参的值复制一份传递给形参。这意味着,在函数中对形参的修改不会影响实参。示例如下: public class ValuePassing { public static …

    Java 2023年5月26日
    00
  • Java SpringBoot自动配置原理详情

    Java SpringBoot是目前非常流行的开源框架之一,它通过自动配置的方式简化了开发者的工作量,并提高了开发效率。本文将详细讲解Java SpringBoot自动配置的原理以及实际应用,让读者对SpringBoot有更深刻的理解。 SpringBoot自动配置原理 SpringBoot自动配置的核心在于@EnableAutoConfiguration注…

    Java 2023年5月19日
    00
  • ssm 使用token校验登录的实现

    让我们来详细讲解一下“SSM 使用 Token 校验登录的实现”。 通过 Token 进行登录认证机制是常见的 Web 应用程序的身份认证机制之一。Token 是在身份验证后服务器返回的字符串,通常用于在客户端和服务器之间共享身份验证状态。以下是实现 SSM 使用 Token 校验登录的攻略: 1.概述 Token 认证机制主要分为以下几个流程: 用户通过表…

    Java 2023年6月16日
    00
合作推广
合作推广
分享本页
返回顶部