在下拉列表中隐藏/显示子项目更改另一个下拉列值（父项）

Question

我可以使用javascript完成简单的过滤。我是javascript的新手。我有一个车辆makeList和车辆modelList来自java到我的JSP。

            <tr><td><form:label path="makeId">Make: </form:label></td>
            <td><form:select  path="makeId" required="true">
                    <form:options items="${makeList}" itemValue="makeId" itemLabel="makeName"></form:options>
                </form:select>
            </td>
            <td><form:label path="modelId">Model: </form:label></td>
            <td><form:select path="modelId" required="true">
                    <form:options items="${modelList}" itemValue="modelId" itemLabel="modelName"></form:options>
                </form:select>
            </td></tr>

我想要做的就是改变制作，只显示与制作相关的模型并隐藏休息

希望有人能给我一个最简单的解决方案

Answer 1

<强>解决

以下更改为我提供了解决方案：

1. 迭代modelList并将makeId指定为id

                                                                                                                     

            <td><form:label  path="modelId">Model: </form:label></td>
            <td><form:select  path="modelId" required="true">
                     <c:forEach items="${modelList}" var="model">
                        <form:option value="${model.modelId}" id="${model.makeId}" ><c:out value="${model.modelName}"/></form:option>

                     </c:forEach>
                </form:select>
            </td>

1. jquery onchange of Make dropdown：

$("#makeId").show( function() { var makeId = $(this).attr('value'); $("#modelId option[id !=" + makeId + "]").hide().attr("selected", false); $("#modelId option[id ="+makeId+"]").show().attr("selected",true); });