.eachを使用してjsonresultからドロップダウンリストを作成する

Question

私は、別のものの選択に基づいて動的に作成する必要があるドロップダウンリストを持っています。それは、リストを最初にクリアした後に、ドロップダウンリストに新しいデータをレンダリングする必要があるまで、すべて動作します。リストはクリアされますが、コントローラーから返される新しいデータを入力することができません。私はこれのためにそれぞれを使用しようとしています。あなたが見ることができるように、私はリストのシリアル化されたJSONの結果を返すよ

[AcceptVerbs(HttpVerbs.Get)] 
public JsonResult UpdateDocumentSubType(string DocumentType) 
{ 
    List<SelectListItem> DocumentSubTypeList = new List<SelectListItem>(); 
    PropertyModel model = new PropertyModel(); 
    int DocTypeID = 0; 
    //get DocTypeID 
    DocTypeID = model.GetDocTypeID(DocumentType); 
    //gets new document subtype list 
    DocumentSubTypeList = model.GetDocumentSubTypes(DocTypeID); 
    //return document subtype list 
    return Json(DocumentSubTypeList, JsonRequestBehavior.AllowGet); 
} 

：

は、ここで問題になっているコントローラメソッドです。ビューで

、私は次のようにあります

$.ajax({ 
    url: '@Url.Action("UpdateDocumentSubType","Document")', 
    type: 'GET', 
    dataType: "json", 
    data: { DocumentType: SelectedDocTypeText }, 
    async: true, 
    success: function (data) { 
     var select = $("#Docs_DocumentSubTypeID"); 
     select.empty(); 
     $.each(data, function (index, item) { 
      select.append($('<option></option>').val(item).html(index)); 
     }); 
    } 
}); 

すべてが崩壊してしまう場所です。コードはselect.empty（）にヒットし、それを正常に実行しますが、SelectListItemの "text"値として代わりにオブジェクトの配列のインデックス要素を提供します。基本的に、タグは次のように表示されます。

<option value="[object Object]">1</option> 
<option value="[object Object]">2</option> 
<option value="[object Object]">3</option> 
<option value="[object Object]">4</option> 

私はデータが渡されていることを確認しました。 .eachをとり、独自の関数に入れて、その関数を呼び出し、 "debugger;"を追加します。それには、結果として生じる「データ」のデータを[オブジェクト、オブジェクト]の4つの要素として見ることができます。

あなたが推測しているかもしれませんが、JQueryは私の強い訴訟ではありません。 :)

Answer 1

最初にUpdateDocumentSubTypeメソッドにList<SelectListItem>を返すべきではありません。SelectListItemの余分なプロパティを使用しないときにクライアントに戻すポイントはありません。返す必要があるのは、2つのプロパティ（オプション値と表示テキストのプロパティ）を含む匿名オブジェクトです。

あなたはvalue="[object Object]"を見ている理由は、あなたが複雑なオブジェクトの配列を返すということです

var data = db.YourTable.Where(...).Select(x => new 
{ 
    Value = x.ID, 
    Text = x.Name 
}; 
return Json(data, JsonRequestBehavior.AllowGet); 

あなたがモデルを示していないが、それは性質がint IDとstring Nameを言う含まれていると仮定すると、それは（例えば）になりますしたがってitemの$.each(data, function (index, item) {は、プロパティーValue,Selected,Text,などを含むオブジェクトを参照しています（つまり、SelectListItemのプロパティ）、あなたはスクリプトが必要です

$.each(data, function (index, item) { 
    select.append($('<option></option>').val(item.Value).html(item.Text)); 
}); 

Answer 2

これも正しいですが、これは正しくない可能性があります。試してみてください

$('<option></option>').val(item[index]).html(index)); 

またはその代わりに、あなたが書いたものの

$('<option></option>').val(item[0]).html(index)); 

。

さらに詳しい情報が必要です。あなたはgithubレポを共有できますか？

私は非常によく似た何かに取り組んでいますし、これは私がやったことです：

（96時までのライン85から機能をレンダリングしてください） https://github.com/stephenhu3/codepal/blob/development/js/youtubeComponent.js

それは私のために働きました。