Заполнение выбора на основе предыдущего выбора на JSP

Question

Я никогда не писал код в JS или JQuery, я пробовал разные решения, но ни одно из них не помогло мне. Моя проблема заключается в следующем:

У меня есть java класс Product, который имеет 3 поля: id, type, model. Я передаю ArrayList из Product в jsp как ${products}.

в JSP У меня есть два поля выбора,

1. просит вас выбрать тип продукта
2. просит вас выбрать модель в зависимости от типа продукта, который вы выбрали

Вот мой самый последний код:

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

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-запрос на сервер для фильтрации только определенных моделей продукта.