Could not Append to select tag by javascript and jquery

Question

I am doing an mvc 5 project and I have cart view and I have 2 deopdownlist named country and state in it and when it is run the country model fill country dropdownlist and now I want to fill state dropdownlist onchange of country dropdownlist so I used code below to do this but it does not work successfully.i debug this code it works correctly the only problem is that this code can not append to state dropdownlist.I dont know what to do

@model IEnumerable<NewMVCWebApp.Models.Country>
<script>
    function f11() {
        var a = $("#se option:selected").text();
        var b = $("#se option:selected").index();
         $.ajax({           
            url: "/State/GetStates",
            data: { a: a, b: b },
            type:"post",
            success: function (value) {
                cities = JSON.parse(value);
                $("#ss").html("");
                $("#ss").append("<option>--- please select---</option>");
                $.each(cities, function (idx, city) {
                    $("#ss").append("<option value='" + city.ID + "'>" + city.name + "</option>")
                })

            },
            error: function () {
                $("#lbl").html("Error in Ajax...!");
            }
        })

      }
</script>

<div class="tabs-b">

    <ul>
        <li>estimate</li>

    </ul>
    <div>
        <div>
            <p>enter destination</p>
            <p class="required">
                <label for="sha">Country</label>
                <select id="se" name="Country" onchange="f11()">
                    <option>--- please select ---</option>
                    @foreach (var item in Model)
                    {
                        <option value="@item.ID">@item.name</option>
                    }
                </select>

            </p>
            <p class="required">
                <label>region</label>
                <select id="ss"></select>
            </p>
            <p>
                <label for="shc">post code</label>
                <input type="text" name="shc" id="shc" required="">
            </p>
            <p class="link-c">@*<a href="./">get</a>*@</p>
        </div>
        <div>
            <p></p>
        </div>
        <div>
            <p></p>
        </div>
    </div>
</div>

the action in the controller

public string  GetStates(string a,string b)
{
JavaScriptSerializer js = new JavaScriptSerializer();
List<state> states = _context.states.Where(x => x.IDK == Idk).ToList();
return js.Serialize(states.Select(x => new { ID = x.ID, name = x.name }));
}

Answer 1

In controller change method type to JsonResult

 public JsonResult  GetStates(int index)
    {
        JsonResult json = new JsonResult();
        json.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
        json.Data = _context.states.Where(x => x.IDK == index).ToList();
        return json;
    }

and in html file

function f11() {
        var index = $("#se option:selected").val();
         $.ajax({           
            url: "/State/GetStates",
            data: { index: index },
            type:"post",
            success: function (value) {
                var result  = "";
                $("#ss").append("<option>--- please select---</option>");
                $.each(value, function (index, city) {
                     result += "<option value='" + city.ID + "'>" + city.name + "</option>";

                });
                $("#ss").append(result);

            },
            error: function () {
                $("#lbl").html("Error in Ajax...!");
            }
        })

      }