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.

<selectname="ID"id="ID"onchange="DoYourTaskHere(this);"><optionvalue="select"selected="selected">Select</option><c:forEachitems="${A.List}"var="Variable"><optionvalue="${ID}"><c:outvalue="${ID}" /></option></c:forEach></select>

And in the script you write the code as follows.

functionloadValue(ID) {
    if (ID.value != "select") {
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera,// SafariValueXmlHttpReq = newXMLHttpRequest();
        } else {// code for IE6, IE5ValueXmlHttpReq = newActiveXObject("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 :

<formname='cars'><selectname='brand'></select><selectname='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 = 0var selectedModelIndex = 0functionrender() {
    // 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>");
    });
}

functionmain() {
    $("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