填充选择，基于jsp中的先前选择答案

【问题标题】：Populating select, based on previous select on jsp填充选择，基于jsp中的先前选择
【发布时间】：2018-04-25 16:26:22
【问题描述】：

我从来没有用 JS 或 JQuery 编写代码，我尝试了不同的解决方案，但没有一个适合我。我的问题如下：

我有一个java 类Product，它有3 个字段：id、type、model。我将ArrayList 的Product 作为${products} 传递给jsp。

在 jsp 中我有两个选择字段，

要求您选择产品类型
要求您根据您选择的产品类型选择型号

这是我最近的代码：

<br>Choose Type
<select name="productType" form="addRequest" id="productType">
    <option value="EXHAUST">EXHAUST</option>
    <option value="HEATER">HEATER</option>
    <option value="BOILER">BOILER</option>
    <option value="OTHER">OTHER</option>
</select>

<br>Choose Model
<select name="productModel" form="addRequest" id="productModel">
    <c:forEach items="${products}" var="product">
         <option value="${product.getModel()}">${product.getModel()}</option>
    </c:forEach>
</select>

<script>
    $("#productType").change(function () {
            var productList = ${products};
            var chosenType = $("#productType").val();
            productList.filter(function (p) {
            return p.getType() == chosenType
                })

            $.populateSelect($('#productModel').get(0), productList)
    })
</script>

【问题讨论】：

最好在服务器端按产品类型过滤模型。您是否从数据库中加载模型和产品类型？
@bpu 是的，我正在从数据库加载数据。为了在服务器端过滤它，我需要发出额外的 http 请求和控制器，知道有 jQuery，我不想这样做。老实说，它不是唯一需要此过滤的页面。
我建议实现一个新的控制器，它将产品类型 ID 作为输入并形成 Json 响应。它需要通过添加 where 子句向数据库发送额外的查询。过滤后的数据可以通过 jquery get request 检索，然后将新选项应用于 select。作为您当前的解决方案，在 jsp 页面中解析 ArrayList 有点困难。而且它是服务器和数据库返回所有记录的过载（取决于记录数量）。

标签： javascript jquery html forms jsp

【解决方案1】：

快速解决方案：

<br>Choose Type
<select name="productType" form="addRequest" id="productType">
    <option value="EXHAUST">EXHAUST</option>
    <option value="HEATER">HEATER</option>
    <option value="BOILER">BOILER</option>
    <option value="OTHER">OTHER</option>
</select>

<br>Choose Model
<select name="productModel" form="addRequest" id="productModel">
    <c:forEach items="${products}" var="product">
         <option value="${product.getId()}" data-type="${product.getType()}">${product.getModel()}</option>
    </c:forEach>
</select>

<script>
     $("#productType").on("change", function() {
        var chosenType = $("#productType").val();

        $("#productModel > option").each(function() {
            if($(this).data("type") != chosenType) {
                $(this).css("display","none");
            } else {
                $(this).css("display","block");
            }
        });

        $("#productModel").selectpicker('refresh');
    });
</script>

另一种解决方案是向服务器发送 ajax 请求，仅用于过滤特定产品型号。

【讨论】：