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从数据库获取数据填充下拉框实现二级联动菜单的方法”的详细攻略。通过以上步骤，我们可以轻松实现二级联动菜单，并且可以通过修改数据库中的数据来扩展菜单的选项值。

阅读剩余 84%

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