JQuery ajax () внутри для цикла

Question

Я использую режим редактирования по умолчанию на бритве. Все работает, кроме функции заполнения выпадающего списка. Что касается моей работы, мне нужно заполнить раскрывающийся список моего состояния на основе текущего значения выбранной страны при событии загрузки. Для этого я реализовал ajax внутри цикла for.

бритва

@foreach (CustomerModel customer in Model)
    {

        <tr>
            <td class="CustomerId">
                <span id="spn_@customer.CustomerId">@customer.CustomerId</span>
            </td>
            <td class="Name">
                @Html.TextBoxFor(model => customer.Name,new { id =  "txtName_" + @customer.CustomerId , onkeyup = "getID(this.id)" })
                @*<input id="txtName_@customer.CustomerId" type="text" onkeyup="getID(this.id)" value="@customer.Name"/>*@
            </td>
            <td class="State">
                <select id="ddlState_@customer.CustomerId" style="width:200px;">
                    @*<option>@customer.StateName</option>*@
                </select>
            </td>

            <td class="Country">
               <select id="ddlCountry_@customer.CustomerId" onfocus="fillCountry(this.id)" onchange="fillState(this.id,this.value)" style="width:200px;">
                   <option>@customer.CountryName</option>
               </select>
            </td>
           <td>
               <button id="@customer.CustomerId" onclick="update(this.id)">Save</button>
               </td>
        </tr>
          <script>
              arrayID.push('@customer.CustomerId');
            </script>
    }

Сценарий

    var ids;
    var txtName;
    var txtCountry;
    var onchangeFlag = 0;
    s = 0;
    var idOf;
    var idArray = [];
    var length = 2;
    var flag = 1;
    $(document).ready(function () {
       // alert(arrayID);
        var ido;
        var ddlCountryID;
        var index = 0;
        var countryValue;
        var ddlStateidElement;
        var s = 0;
        var ddlStateID;
        var lenthof = arrayID.length;
        for (var i = 0; i < lenthof; i++) {
           // alert(lenthof);
            ido = arrayID[i];
            //index = ido;
            ddlCountryID = "ddlCountry_" + ido;
            ddlStateID = "ddlState_" + ido;

            countryValue = $('#' + ddlCountryID).val();
           // alert(countryValue);
            $.ajax({
                type: "POST",
                url: "/New/GetOnState",
                contentType: "application/json; charset=utf-8",
                data: '{"country":"' + countryValue + '"}',
                dataType: "html",
                success: function (result, status, xhr) {
                    //  alert("success");

                   // alert(arrayID[index]);

                    ddlStateidElement = "ddlState_" + ido;
                    $('#' + ddlStateidElement).html(result);
                    //index = index + 1;

                },
                error: function (xhr, status, error) {
                    alert("Enter");

                }
            });
           //loopend
        }

И код c #, и ajax всегда успешны, но индекс цикла всегда указывает на последний индекс массива, я не знаю, почему индекс цикла не работает.

выход

Answer 1

 $.ajax({
                type: "POST",
                url: "/New/GetOnState",
                contentType: "application/json; charset=utf-8",
                data: '{"country":"' + countryValue + '"}',
                dataType: "html",
                async:false,
                success: function (result, status, xhr) {
                    //  alert("success");

                   // alert(arrayID[index]);

                    ddlStateidElement = "ddlState_" + ido;
                    $('#' + ddlStateidElement).html(result);
                    //index = index + 1;

                },
                error: function (xhr, status, error) {
                    alert("Enter");

                }
            });