とAjaxドロップダウン

Question

私は記事のするJsonResultリストを持っており、それがこのように見えた：とき私は今

$(document).ready(function() { 
     $.getJSON("/fakturi/getArticles", function (data) { 
      $.each(data, function (i, data) { 
       $('<option>', 
        { 
         value: data.artID, 
         text: data.artCode 
        }).html;   
      }); 
     }) 
     $(function() { 
      $("[name='bar']").on("change", function() { 
       $("#artikal").val($(this).val()); 
      }); 
     }); 
    }); 

：私はJavaScriptを持っているHTMLビューで今すぐ

[ 
    { 
     "tbl_dobavuvaci": null, 
     "tbl_fakDet": null, 
     "tbl_fakMas": null, 
     "tbl_kompanii": null, 
     "tbl_useri": null, 
     "artID": 1, 
     "artKompID": 1, 
     "artUserID": 1, 
     "artCode": 25456658845646540, 
     "artIme": "Artikal 1 Ime", 
     "artCenaNab": 10, 
     "artCenaProd": 15, 
     "artDDV": 18, 
     "artDobavuvac": 1 
    }, 
    { 
     "tbl_dobavuvaci": null, 
     "tbl_fakDet": null, 
     "tbl_fakMas": null, 
     "tbl_kompanii": null, 
     "tbl_useri": null, 
     "artID": 2, 
     "artKompID": 1, 
     "artUserID": 1, 
     "artCode": 8606010872303, 
     "artIme": "TestName", 
     "artCenaNab": 25, 
     "artCenaProd": 30, 
     "artDDV": 18, 
     "artDobavuvac": 1 
    } 
] 

artCodartCodeの値を持つドロップダウンをJsonから変更し、第2フィールドをコアで更新してartImeという名前で更新しました。

HTMLのCODE：

@Html.DropDownList("bar", null, string.Empty, htmlAttributes: new { @class = "form-control" }) 
@Html.ValidationMessageFor(model => model.tbl_artikli, "", new { @class = "text-danger",}) 

@Html.DropDownList("artikal", null, string.Empty, htmlAttributes: new { @class = "form-control" }) 
       @Html.ValidationMessageFor(model => model.tbl_artikli, "", new { @class = "text-danger", }) 


@Html.TextBox("artCenaProd", "", new { @class = "form-control", @id = "artCenaProd", style = "width:60pt" }) 

私の質問は、私はドロップダウンを変更する時期artCenaProdという名前の3番目のフィールドを更新する方法ですか？

Answer 1

ajax呼び出しから受け取ったjson配列をスクリプト内のローカル変数に格納する必要があります。ドロップダウン変更イベントが発生すると、選択したオプションを読み込み、オプション値（artID）を取得します。今ARTIDさんが一意である場合、あなたは1、それとのサブ配列を取得します（このIDのアイテムのためのローカル配列をフィルタリングしてサブセットを取得します。

$(document).ready(function() { 

    var localData = []; 
    var $bar = $("[name='bar']"); 

    $.getJSON("@Url.Action("/fakturi/getArticles")", 
     function(data) { 
      localData = data; 
      $bar.empty(); 
      $.each(data, 
       function(i, data) { 
        var t = $('<option>', { value: data.artID, text: data.artCode }); 
        $bar.append(t); 
       }); 
     }); 
    $bar.change(function() { 
     var v = $(this).val(); 

     var filteredData = localData.filter(function(item) { 
      return item.artID == v; 
     }); 
     if (filteredData.length) { 
      $("#artCenaProd").val(filteredData[0].artCenaProd); 
     } 

    }); 

}); 

また、あなたは、AJAX呼び出しを使用して、ドロップダウンのオプションを移入している場合、DropDownListヘルパーメソッドを使用する必要は！単にSELECT要素のためのHTMLマークアップを書かない

<SELECT name='bar'> 

</SELECT>