我需要你的帮助：(
主要想法很简单，我有一个第一个下拉列表，我想根据第一个来过滤第二个下拉列表中的值。
我无法修改数据模型。
我的两组值是通过请求分配器发送的：
[...]
List<ConfigSousType> listConfigSousType = new ArrayList();
List<ConfigType> listConfigType = new ArrayList();
[...]
String querySousType = "SELECT distinct colonne, idValeur FROM ThanactConfigType";
String queryType = "SELECT * FROM ThanactConfigType";
[...]
request.setAttribute("listConfigSousType",listConfigSousType);
request.setAttribute("listConfigType",listConfigType);
String nextJSP = "/addConfigSousType.jsp";
RequestDispatcher dispatcher = getServletContext().getRequestDispatcher(nextJSP)
[...]
数据模型是这样的：
第一个表类型：名称、idType、值
第二个表SubType：名称，idType，subTypeName，idSubType
示例：
类型表
ColorCategory，1，TheBlueColors
ColorCategory，2，TheRedColors
食品类别，1，美味食品
子类型表
ColorCategory，1，DeepBlue，1
ColorCategory
我正在创建管理部分，允许在子类型表中添加新行。
我想要一个带有"ColorCategory"、"FoodCategory"的第一个下拉列表
然后是我的第二个下拉列表，idType应该根据第一个进行筛选
我选择"；ColorCategory"；在第一个下拉列表上；TheBlueColors""红色"；
在我的例子
- listConfigType包含整个表(它们将是小表，<100行(
- listConfigSousType包含"；ColorCategory 1〃"ColorCategory 2〃"FoodCategory，1〃
在我的JSP中，我得到的是这样的：
<select id ='name' required name='name'><br><br>
<c:forEach items="${listConfigSousType}" var="configSousType">
<option value="${configSousType.name}">${configSousType.name}</option>
</c:forEach>
</select>
=>两个问题：
- 对于第一个下拉列表，我将获得两次ColorCategory，我需要一种不同的方式
- 我应该如何填充第二个下拉列表
我在第一个下拉列表中选择ColorCategory，第二个应该提供，"；TheBlueColors""红色">
我想我可能需要一个带有onChange函数的javascript部分，但我不知道里面应该是什么。
要在我的显示列表上显示idType的值，我使用：
<label for='value'>Valeur </label>
<input id ='value' type='text' name='value'
<c:forEach items="${listConfigType}" var="configType">
<c:if test="${configType.name == configSousType.name && configType.idType == configSousType.idType}">
value="${configType.value}"><br><br>
</c:if>
</c:forEach>
谢谢你，如果你读了这整篇文章，我希望你能帮助我：(
我在stackoverflow上找到了一种使用Gson 解决此问题的方法
我使用了这篇帖子中的答案：如何使用Servlet和Ajax？
我使用这个java:
import com.google.gson.Gson;
public class optionsSousType extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Map<String, String> options = new LinkedHashMap<>();
options.put("value1", "label1");
options.put("value2", "label2");
options.put("value3", "label3");
String json = new Gson().toJson(options);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
}
这个JSP:
<%@ page language="java" import="java.util.*"%>
<%@ page contentType="text/html; charset=ISO-8859-1" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<link rel='stylesheet' type='text/css' href='../Formulaire.css'>
<meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=no'>
<title>Thanact - Gestion de l'activité Thanatologique</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("optionsSousType", function(responseJson) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
var $select = $("#libelle"); // Locate HTML DOM element with ID "someselect".
$select.find("option").remove(); // Find all child elements with tag name "option" and remove them (just to prevent duplicate options when button is pressed again).
$.each(responseJson, function(key, value) { // Iterate over the JSON object.
$("<option>").val(key).text(value).appendTo($select); // Create HTML <option> element, set its value with currently iterated key and its text content with currently iterated item and finally append it to the <select>.
});
});
});
</script>
</head>
<body>
<br/>
<div id='exForm'>
<form name="configform" method="post" action="../addConfigType">
<fieldset><legend>Ajout d'une configuration de sous colonne</legend>
<label for='colonne'>Type de colonne</label>
<select id ='colonne' required name='colonne'><br><br>
<c:forEach items="${listConfigType}" var="configType">
<option value="${configType.colonne}">${configType.colonne}</option>
</c:forEach>
</select>
<label for='libelle'>Type de sous colonne</label>
<select id ='libelle' required name='libelle'> <option>Please select parent</option> </select><br><br>
<button id="somebutton">press here</button>
<label for='libValeur'>Valeur</label><input id ='libValeur' type='text' required name='libValeur'><br><br>
<input type='submit' class="buttonBlue" value="Ajouter" name="Submit">
</fieldset>
</form>
</div>
</body>
</html>
当我点击按钮时，我得到了一个错误：未捕获类型错误：无法使用"in"运算符在中搜索"3282"，因为我需要指定它是JSon:
$.getJSON("optionsousType">
然后我的下一个问题是什么都没发生。这是我的servlet的路径：
所以我的最终解决方案是：$.getJSON("${pageContext.request.contextPath}/optionsousType"，函数(responseJson(｛
我希望有人会觉得这很有帮助！