javascript动态下拉列表值随JSP更改

1 周，5 日 Questions & Answers 139

我需要你的帮助：）

主要思想非常简单，我有一个第一个下拉列表，我想根据第一个下拉列表过滤第二个下拉列表中的值

我无法修改数据模型

我的两组值通过请求调度器发送：

[...]
    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、值

第二个表子类型：名称、idType、子类型名称、idSubType

示例：

类型表
颜色类别，1，蓝色
颜色类别，2，三种颜色
食品类别，1，敏捷食品

子类型表
颜色类别，1，深蓝色，1
颜色类别，1，浅蓝色，2
颜色类别，2，深红色，1
颜色类别，2，猩红色，2
食品分类，1，比萨饼

我正在创建允许在子类型表中添加新行的管理部分

我想要一个带有“颜色类别”、“食品类别”的第一个下拉列表
然后我的第二个下拉列表是，idType应该根据第一个进行过滤
我在第一个下拉列表中选择“ColorCategory”，第二个下拉列表允许值“TheBlueColors”，“TheRedColors”

以我为例

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，我需要一个独特的方式
我应该如何填充第二个下拉列表
我在第一个下拉列表中选择颜色类别，第二个应该提供“蓝色”、“红色”

我想我可能需要一个带有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>

谢谢你，如果你读了这篇文章，我希望你能帮助我：）

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); } }

<%@ 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>

共 (1) 个答案

# 1 楼答案

我在stackoverflow上找到了一个使用Gson解决这个问题的方法

我使用了这篇帖子的答案： How to use Servlets and Ajax?

我使用这个java：

这个JSP：

当我点击按钮时，我得到了一个错误： 未捕获类型错误：无法使用“in”运算符在中搜索“3282” 因为我需要指定它是一个JSon：

美元。getJSON（“选项Soustype”

然后我的下一个问题是什么都没发生。这是我的servlet的路径：

所以我最后的解决办法是： $.getJSON（${pageContext.request.contextPath}/optionsSousType），函数（responseJson）{

我希望有人会觉得这很有帮助

Python中文网

有 Java 编程相关的问题?

javascript动态下拉列表值随JSP更改

共 (1) 个答案

# 1 楼答案