DropDown Menu Changing OnChange

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 selecti

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

Solution 2:

Allright , here something to get you started :

<form name='cars'>
<select name='brand'></select>
<select name='model'></select>
</form>
​

and the javascript (i'm using jQuery ) :

var application_model = [
    {
    name: "General motors",
    models: [
        "model1", "model2", "model3"
        ]},
{
    name: "Mercedes",
    models: [
        "model4", "model5", "model6"
        ]},
{
    name: "Fiat",
    models: [
        "model7", "model8", "model9"
        ]}
];

var selectedBrandIndex = 0
var selectedModelIndex = 0

function render() {
    // render the first combo
    $('select[name=brand]').empty();
    $.each(application_model, function(index, object) {
        var selected = "";
        if (index == selectedBrandIndex) {
            selected = "selected";
        }
        console.log(this);
        $('select[name=brand]').append("<option value='" + index + "'   " + selected + ">" + object.name + "</option>");
    })

    // render the second combo
    $('select[name=model]').empty();
    $.each(application_model[selectedBrandIndex].models, function(index, object) {
        var selected = "";
        if (index == selectedModelIndex) {
            selected = "selected";
        }
        console.log(this);
        $('select[name=model]').append("<option value='" + index + "'   " + selected + ">" + object + "</option>");
    });
}

function main() {
    $("select[name=brand]").bind("change", function(event) {
        console.log(event.currentTarget.value);
        selectedBrandIndex = event.currentTarget.value;
        render();
    });
    render();
}

main();​

check the fiddle here :

http://jsfiddle.net/camus/MAgza/2/

cheers

Solution 3:

you can try related combobox

You can easily setup any number of combobox instances on a single page. They can interact with each other based on certain client or server side events.

This example shows how the comboboxes can interact with each other using client-side methods and requesting the items on demand. To request the items on demand at the client-side, the requestItems() method is used.

The ViewState of the dependent comboboxes is disabled because the data required for their proper operation in this example is maintained in their ClientState.

refer http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx