Hide/Show child items on a dropdown onchange of the other dropdown value (parent)

Question

I have simple filtering to be done possibly using javascript. I am new to javascript. I have a vehicle makeList and vehicle modelList coming from the java to my 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>

All I want to do is onchange of make , show only those model associated with that make and hide rest

Hope someone can get me a simplest solution

the use case is not very clear. I guess you're going to select an item from the first dropdown and... do what with the other? Filter something? Autoselect the matching value? However, you can't but exploit javascript in this circumstance. Basically, I'd bind an _onchange_ event on the first dropdown, get the selcted item (look [here](http://stackoverflow.com/a/1085810/740480)) and filter the result of the second dropdown with some criteria by [iterating on select options](http://stackoverflow.com/a/2950163/740480) and [hiding those that don't match](http://stackoverflow.com/a/1271528/740480). — MaVVamaldo, Mar 03 '16 at 20:29
@MaVVamaldo Yes, I want to have only those Items visible in **model** drop-down whose modelList.makeId is equal to makeId selected in the **make** drop-down. Thanks for the start ! I — hackfield, Mar 03 '16 at 20:40
ok that's fine, then. You have everything you need in the previous comment. Just to clarify, spring it's not of interest here. It does things _before_ your problem comes in. Everything is set up when you have to work with the filtering mechanism, and Spring has already completed its task. This is a javascript question I suggest to edit your tags. — MaVVamaldo, Mar 03 '16 at 21:08

hackfield · Accepted Answer · 2016-03-22T17:16:17.640

Solved

Following changes gave me the solution:

Iterating the modelList and assigning the makeId to 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>

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); });

Hide/Show child items on a dropdown onchange of the other dropdown value (parent)

1 Answers1