Can my dropdownlistbox on MVC fire an event so I can populate another?

I have a dropdownlistbox on my MVC web page. The dropdown allows me to select country name. When a user changes the country I would like another drop down to be populated with cities for that country.

Is this possible to do with MVC? I am not sure if I should use javascript, AJAX, jquery or a combination of the two.

All hel开发者_JS百科p and advice would be much appreciated.

Use jQuery's ajax capabilities. When the 1st list changes (.change()), send an ajax request to an MVC JSON action. When the request returns, you can use it to populate the next dropdown.

$('#myDropDown').live('change', function(){
});

You can also use Ajax calling a secondary page, where you populate and return one jSon serialized.

the other option is using AutoPostBack and OnSelectedIndexChanged (use this as reference)

<script type="text/javascript >
    //Function for package binding on ddlindustry selected change index
    $("#ID_OF_THAT DDL").change(function () {

        var vv = $("#ID_OF_THAT DDL option:selected").val();
        if (vv >= 0) {

            $.ajax({
                type: "GET",
                url: '<%=Url.Action("ACTION", "CONTROLLER") %>',
                data: {
                    "VARIABLE_TO_PASS": $("#ID_OF_THAT DDL option:selected").val()
                }, //you can call public action from controller
                dataType: "text", //in data enter value which u have 2 pass must same as like control actioresult passing param
                contentType: "application/json",
                success: bindpackage
            })
        }
    });
</script>

<script type="text/javascript">
    function bindpackage(result) {
        eval(result);
    }

After that in your controller :

public ActionResult Function123 (int VARIABLE_TO_PASS){

    RjsResult r = new RjsResult();

    ViewData["Name"] = function to get data;

    r.update("DIV_NAME","Name of the partial to update",ViewData, ControllerContext);

    return r;

}

Hope that helps :)