（ function （）{

（ ＃countryId ）。change（ function （）{

.get（ / Country / GetStatesById，{ID：

hey there i'm new on this

i already create cascading dropdownlist by script jason

but when i try to insert this data i can only insert Country but States & City not insert why States & City not insert to database only just Country and here my code

<!--Country-->>
        <div class="form-group">
            @Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("countryId", (SelectList)ViewBag.SelectCountry, "select please", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })
            </div>
        </div>
 
        <!--States-->>
        <div class="form-group">
            @Html.LabelFor(model => model.States, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <select id="statelistdrop" class="form-control" name=""></select>
                @Html.ValidationMessageFor(model => model.States, "", new { @class = "text-danger" })
            </div>
        </div>
 
        <!--City-->>
        <div class="form-group">
            @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <select id="citieslistdrop" class="form-control"></select>
                @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
            </div>
        </div>

and here my script for cascading dropdownlist

<script>
    $(function () {
        $("#countryId").change(function () {
            $.get("/Country/GetStatesById", { ID: $("#countryId").val()}, function (data) {
                $("#statelistdrop").empty();
                $.each(data, function (index,row) {
                    $("#statelistdrop").append(" <option value='" + row.state_id + "'>" + row.name+ "</option>")
                });
            })
        });
    });
 
</script>
 
<script>
    $(function () {
        $("#statelistdrop").change(function () {
            $.get("/Country/GetCitiesById", { ID: $("#statelistdrop").val() }, function (data) {
                $("#citieslistdrop").empty();
                $.each(data, function (index,row) {
                    $("#citieslistdrop").append(" <option value='" + row.state_id + "'>" + row.name + "</option>")
                });
            })
        });
    });
 
</script>

What I have tried:

i try to change razor code but didn't work

(function () {

("#countryId").change(function () {

.get("/Country/GetStatesById", { ID: