DropDown List Selected Index Change Event In MVC 3 Razor

You have to write Javascript with ajax as mentioned in the previous answer. However, it can also be as simple as posting the form back to the same action, and capturing the values to re-display the modified view again.

$('#myDropdown').change(function(){ $('#myForm').submit(); }) 

$(document).ready(function () { $("#country").change(function () { if ($("#country").val() != "0") { var options = {}; options.url = "/Common/GetStates"; options.type = "POST"; options.data = JSON.stringify({ country: $("#country").val() }); options.dataType = "json"; options.contentType = "application/json"; options.success = function (states) { //alert(states[i].State); $("#state").empty(); for (var i = 0; i < states.length; i++) { $("#state").append("<option>" + states[i].State1 + "</option>");}} options.error = function () { alert("Error retrieving states!"); }; $.ajax(options);} else {$("#state").empty(); }}); }); 

In view

<select id="state"> <option value="0">select</option> </select> 

In Controlr

public JsonResult GetStates(string country){ int cntry = Convert.ToInt32(country); List<State> states = db.States.Where(i => i.Countryid == cntry).ToList(); return Json(states);}