Question

我从来没有在JS或JQuery中编写代码，我尝试了不同的解决方案，但它们都没有为我工作。我的问题如下：

我有一个java班Product，其中包含3个字段：id，type，model。我将ArrayList的{{1}}传递给jsp Product。

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

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

这是我最近的代码：

${products}

Answer 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请求，仅用于过滤特定产品型号。

基于jsp上的先前选择填充选择

1 个答案: