javascript - Cascading dropdown lists in Mvc 4.0 -

javascript - Cascading dropdown lists in Mvc 4.0 -

i have been trying cascade dropdown lists. purpose using javascript in .cshtml page . don't know reason , i'm not able phone call js method , leave lone controller method later needs called within js method. dropdowns fetching state , city info i'm not getting city according state selected.

class="lang-html prettyprint-override"><div class="editor-label"> @html.labelfor(model => model.state_id) </div> <div class="editor-field"> @html.dropdownlist("state",null,"select state", new {@class="span4", id="state"}) @html.validationmessagefor(model => model.state_id) </div> <div class="editor-label"> @html.labelfor(model => model.cityid) </div> <div class="editor-field"> @html.dropdownlist("city",null,"select city", new {@class="span4", id="city"}) @html.validationmessagefor(model => model.cityid) </div> <script src="~/scripts/jquery-1.7.1.js"></script> <script src="~/scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" > $(document).ready(function(e) { $("#state").change(function (e) { var selectedvalue = $(this).val(); if(selectedvalue != "select") { $.ajax({ url: '@url.action("getcities","employer")', type: 'post', //data: { "selectedvalue": selectedvalue}, data: {id: $("#state").val()}, datatype: 'json', success: function(response) { var items = ""; $.each(response, function(i, city) { $("#city").append('<option value="' + city.value + '">' + city.text + '</option>'); }); }, error: function (ex) { alert("failed receive states" + ex); } }); } }); }); </script>

@html.dropdownlistfor(x => x.leagueid, model.leaguesl, "--select league--", new { id = "ddlleague"}) @html.dropdownlistfor(x => x.leagueid, model.divisionsl, "--select division--", new { id = "ddldivision"})

the sec dropdownlist empty, has alternative label --select division--

on alter event of 1st dropdown create ajaxrequest fills sec one.

var value = $("#dropdown1").val(); var ddldivision = $("#dropdowndivision"); ddldivision.html('');//clear current contents; $.ajax({ url: "/home/getdivisions", type: "get", data: { leagueid: value }, success: function (data) { $.each(data, function (index, item) { //item = //populate ddl ddldivision.append($('<option></option>') .val(item.proptwo) .html(item.propone)); }); }); public jsonresult getdivisions(int leagueid) { using (baseballentities context = new baseballentities()) { var divisions = (from x in context.table x.leagueid == leagueid select new { propone = x.divisionname, proptwo = x.divisionid }).tolist(); homecoming json(divisions, jsonrequestbehavior.allowget); } }

edit: side note improve utilize model fill dropdownlist. give model selectlist property

public list<selectlistitem> leaguesl { get; set; }//you need initialize in constructor public actionresult index() { myviewmodel model = new myviewmodel(); using (myentities context = new myentities()) { var leaguelist = context.league.tolist(); foreach (var item in leaguelist) { model.leaguesl.add(new selectlistitem() { text = item.leaguename, value = item.leagueid.tostring() }); } } homecoming view(model); }

javascript jquery asp.net-mvc-3 asp.net-mvc-4