バインド方法jqueryを使用してmvc内の別のドロップダウンで項目を変更してドロップダウンリスト

Question

jquery ajaxを使用して国を選択して状態をバインドしようとしています。

<select id="State" class="selectpicker" required> 
</select> 
@Html.DropDownList("Countries", (IEnumerable<SelectListItem>)ViewBag.CountryId, "Select", new { @class = "selectpicker", @readonly = "true" }) 

$('#Countries').on('change', function() { 

     var CountryId = $('#Countries').val(); 
      $.ajax({ 
      url: "/Home/GetStates", 
      data: JSON.stringify({ 
       CountryId: CountryId 
      }), 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      type: "POST", 

      success: function (Result) { 
       $.each(Result, function (item,index) { 
        console.log(index); 
        $.each(index, function (i) { 

         //$('#State').append($("<option></option>") 
         // .attr("value", index[i].StateID) 
         // .text(index[i].StateName)); 

         //$('#State').append($('<option>', { 
         // value: index[i].StateID, 
         // text: index[i].StateName 
         //}, '</option>')); 

         var optionhtml = '<option value="' +index[i].StateID + '">' + index[i].StateName + '</option>'; 
         console.log(optionhtml); 

         $("#State").append(optionhtml); 

         //$("#State").append($("<option></option>").text(index[i].StateName).val(index[i].StateID)); 
        }); 


       }); 

      error: function (request, status, error) { 
       alert("error occured -- "+request.responseText); 
      } 

     }); 
    }); 

問題は、データのみがoptions.Iが私の結果をループに異なる方法を使用して、私の選択のid =国家を作成してきたように表示されていません。 （これらは上記のコードでコメントされています）

Answer 1

<select class="selectpicker"></select> 

で

var optionhtml = '<option value="' +index[i].StateID + '">' + index[i].StateName + '</option>'; 

を置き換えますrefreshメソッドを使用して、新しい状態に合わせてUIを更新します。これは、オプションを削除または追加するとき、またはJavaScript経由でselectを無効/有効にするときに必要です。

use this: 
$("#State").append(optionhtml).selectpicker('refresh'); 

Answer 2

既存のコードにコメントを参照してください。

$.each(index, function (i) { 

        //$('#State').append($("<option></option>") 
        // .attr("value", index[i].StateID) 
        // .text(index[i].StateName)); 

        //$('#State').append($('<option>', { 
        // value: index[i].StateID, 
        // text: index[i].StateName 
        //}, '</option>')); 

        var optionhtml = '<option value="' +index[i].StateID + '">' + index[i].StateName + '</option>'; //this creates new variable for each item 
        console.log(optionhtml); 

        $("#State").append(optionhtml); // current item will be appended. Also this needs to be replaced 

        //$("#State").append($("<option></option>").text(index[i].StateName).val(index[i].StateID)); 
       }); 

$ .eachの前にvar optionhtmlを挿入します。

それはあなたが使用して、第1の選択を操作し、プログラムでJavaScriptを使用して選択を更新するので、ブートストラップを使用していているように見えるこの

optionhtml += '<option value="' +index[i].StateID + '">' + index[i].StateName + '</option>'; 



$("#State").append(optionhtml); // needs to be placed after $.each ends