MVC dropdownlist, onchange

Question

I have a 2 Dropdownlistfor in html, dropdownlistfor Country and dropdownlistfor state. Im using MVC, I want to be the output like this, If I change the Selected Country, the state of the selected country will be filled in the dropdownlistfor state. Im getting the data of country and state from database, and in the table of state there is a field for countryId. Thanks for help.

here is the sample Code in Html.

            <div class="fieldBlock">
                <div><label>Country</label>&nbsp;*</div>
                <div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div>
                @Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation)
                <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
            </div>

            <div class="fieldBlock">
                <div>@Html.LabelFor(model => model.Employee.StateId, "State/Province")&nbsp;*</div>
                <div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305" })</div>
                <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
            </div>

possible duplicate of [Fill a drop down list dynamically using Javascript/jQuery](http://stackoverflow.com/questions/7253187/fill-a-drop-down-list-dynamically-using-javascript-jquery) — Rafay, Oct 02 '12 at 05:52
Perhaps you might get more help if, you know, you actually asked a question rather than just stating a bunch of things and expecting us to guess what you want. — Erik Funkenbusch, Oct 02 '12 at 06:22

score 3 · Accepted Answer · edited Feb 06 '14 at 10:48

Try this

In View

<script type="text/javascript">
     $(function() {
            $("#ddlCountry").change(function() {
                var selectedItem = $(this).val();
                var ddlStates = $("#ddlState");
                var statesProgress = $("#states-loading-progress");
                statesProgress.show();
                $.ajax({
                    cache: false,
                    type: "GET",
                    url: "@(Url.Action("SomeAction", "SomeController"))",
                    data: { "countryId": selectedItem},
                    success: function (data) {
                        ddlStates.html('');
                        $.each(data, function(id, option) {
                            ddlStates.append($('<option></option>').val(option.id).html(option.name));
                        });

                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert('Failed to retrieve states.');

                    }  
                });
            });
        });
    </script>


<div class="fieldBlock">
    <div><label>Country</label>&nbsp;*</div>
    <div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div>
    @Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation)
    <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
</div>

<div class="fieldBlock">
    <div>@Html.LabelFor(model => model.Employee.StateId, "State/Province")&nbsp;*</div>
    <div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305", @id = "ddlState" })</div>
    <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
</div>

In Controller

public ActionResult SomeAction(string countryId)
{
     //perform your action here
     var states = _stateProvinceService.GetStateProvincesByCountryId(country.Id).ToList();
     var result = (from s in states
                   select new { id = s.Id, name = s.GetLocalized(x => x.Name) }
                  ).ToList();

   return Json(result, JsonRequestBehavior.AllowGet);
}

NOTE: Check whether Id is properly bind to dropdowns and I have written dummy code in action to get state.

I think you need to make an edit in the *Controller* part of your answer. The return type of the action must be **`JsonResult`**. — phougatv, Jul 17 '15 at 11:28

MVC dropdownlist, onchange

1 Answers1

Linked