Javascript 使用JSP更改动态下拉列表值_Javascript_Java_Jsp_Dropdown

Javascript 使用JSP更改动态下拉列表值

javascript java jsp

Javascript 使用JSP更改动态下拉列表值,javascript,java,jsp,dropdown,Javascript,Java,Jsp,Dropdown,我需要你的帮助：）主要思想非常简单，我有一个第一个下拉列表，我想根据第一个下拉列表过滤第二个下拉列表中的值我无法修改数据模型我的两组值通过请求调度器发送： [...] List<ConfigSousType> listConfigSousType = new ArrayList(); List<ConfigType> listConfigType = new ArrayList(); [...] String querySousType

我需要你的帮助：）

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

我无法修改数据模型

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

[...]
    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)
[...]

[…]
List listConfigSousType=new ArrayList（）；
List listConfigType=new ArrayList（）；
[...]
字符串querySousType=“从ActConfigType中选择不同的冒号、idValeur”；
String queryType=“选择*来自ActConfigType”；
[...]
setAttribute（“listConfigSousType”，listConfigSousType）；
setAttribute（“listConfigType”，listConfigType）；
字符串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包含整个表（它们将是小表，有两个问题：

对于第一个下拉列表，我将获得两次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>

Valeur

如果您阅读了整篇文章，我希望您能帮助我：）

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

我使用了这篇文章的答案：

我使用这个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);
    }
}

import com.google.gson.gson；
公共类选项soutype扩展HttpServlet{
@凌驾
受保护的void doGet（HttpServletRequest请求，HttpServletResponse响应）抛出ServletException，IOException{
映射选项=新建LinkedHashMap（）；
期权。看跌期权（“价值1”、“标签1”）；
期权。看跌期权（“价值2”、“标签2”）；
期权。看跌期权（“价值3”、“标签3”）；
字符串json=new Gson（）.toJson（选项）；
setContentType（“应用程序/json”）；
响应。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>


Thanact-生命活动指南
$（document）.on（“click”、“#somebutton”，function（）{//当对ID为“somebutton”的元素调用HTML DOM“click”事件时，执行以下函数。。。
$.get（“optionsSousType”，function（responseJson）{//在“someservlet”的URL上执行Ajax get请求，并使用Ajax响应JSON执行以下函数。。。
var$select=$（“#libelle”）；//查找ID为“someselect”的HTML DOM元素。
$select.find（“option”）.remove（）；//查找标记名为“option”的所有子元素并将其删除（只是为了防止再次按下按钮时出现重复的选项）。
$.each（responseJson，function（key，value）{//迭代JSON对象。
$（“”）.val（key）.text（value）.appendTo（$select）；//创建HTML元素，使用当前迭代的键设置其值，使用当前迭代的项设置其文本内容，最后将其附加到。
});
});
});


科隆南部配置图
科隆式



${configType.colonne}
德索斯科隆型
请选择家长


按这里
瓦勒尔

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

$.getJSON（“选项soutype”

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

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

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

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