Question

I have 3 dropdown menu. and all 3 are interlinked. ie, if i select the values of 1st dropdown, depending on that the second dropdown should display values. depending on the selection of 2nd dropdown, 3rd dropdown should populate the values. have done for 1st and 2nd. but depending on the values of 2nd drop down am not able to populate the values of 3rd dropdown. can anyone plaz help me. i know something like this will be in JFIDDLE.com. but not able to fine the exact name to search that!

Answer 1

You have to use AJAX if you want that. it will be easy.

<select name="ID"
                    id="ID"
                    onchange="DoYourTaskHere(this);">
                        <option value="select" selected="selected">Select</option>
                        <c:forEach items="${A.List}" var="Variable">
                            <option value="${ID}">
                                <c:out value="${ID}" />
                            </option>
                        </c:forEach>
                </select>

And in the script you write the code as follows.

function loadValue(ID) {
    if (ID.value != "select") {
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera,
                                    // Safari
            ValueXmlHttpReq = new XMLHttpRequest();
        } else {// code for IE6, IE5
            ValueXmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        ValueXmlHttpReq.onreadystatechange = processLoadValues;
        ValueXmlHttpReq.open("POST", "getValue.htm?ID="
                + ID.value, true);
        ValueXmlHttpReq.send();
    } else {
        var objSelect = document.getElementById("ValueId");
        var currentValueListLength = objSelect.options.length;
        while (currentValueListLength > 0) {
            objSelect.remove(1);
            currentValueListLength--;
        }

        var objSelect = document.getElementById("2ndDropDownWhereYouWantToPopulate");
        var currentSecondValueListLength = objSelect.options.length;
        while (currentSecondValueListLength > 0) {
            objSelect.remove(1);
            currentSecondValueListLength--;
        }
    }
}