cascading dropdown list

yes i tried it in so many ways up-to my knowledge. but i dint get any value in country drop down.

this is my code:

in view:

<script type="text/javascript">

$(document).ready(function () {
$("#StateDropDown").change(function () {
debugger;
if ($('#StateDropDown').val() != "") {
$.ajax({
type: 'GET',
url: '@Url.Action("GetCountry",Url.RequestContext.RouteData.Values)' + '?stateId=' + this.value,
data: {},
success: function (result) {
$("#CountryDropDown").text(result);
alert(result);
},
error: function () { alert('Error'); }
});
}
});
});
</script>

@Html.DropDownListFor(m => m.State, (SelectList)ViewData["ddlstatename"], new { @class = "textEntryDropDown", id = "StateDropDown" })

@Html.DropDownListFor(m => m.Country, (SelectList)ViewData["ddlcountryname1"], new { @class = "textEntryDropDown", id = "CountryDropDown" })


in CONTROLLER:
[HttpGet]
public ActionResult GetCountry(string stateId)
{
string countryList = GetCountry1(stateId);
SelectList sl1 = new SelectList(countryList);
ViewData["ddlcountryname1"] = sl1;

return View();

// return Content(countryList);

}