下面是详细的“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技术站