2016-12-01 93 views
1

我有一個下拉列表,我需要根據另一個的選擇動態填充。這一切都可以達到我必須先清除列表之後才能在下拉列表中呈現新數據的程度。列表清除,但是然後無法填充從控制器返回的新數據。我正在嘗試爲此使用.each。從jsonresult使用.each填充dropdownlist

這裏是有問題的控制器方法:

[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); 
} 

正如你所看到的,我返回列表的序列化JSON結果。

在看,我有以下幾點:

$.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的「文本」值,它提供了對象數組的索引元素。本質上,標籤呈現如下:

<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並將其放入自己的函數時,調用該函數並添加「調試器」。對此,我可以將所得到的「數據」中的數據看作[object,object]的四個元素。你可能已經猜到了,JQuery並不是我的強項,所以任何幫助都不勝感激。 :)

+0

你在'data'中得到了什麼。你能把這個花在你的問題上嗎? –

回答

0

首先,您不應該在UpdateDocumentSubType方法中返回List<SelectListItem> - 當您從未使用SelectListItem的額外屬性時,沒有意義將其返回給客戶端。您只需返回一個包含2個屬性的匿名對象,一個用於選項值,另一個用於顯示文本。

您還沒有顯示的模型,但假定它包含屬性說int IDstring Name,那麼這將是(比方說)

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

之所以你看到value="[object Object]"是你返回複雜對象的數組因此中的item指的是包含屬性的對象ValueSelectedText,Group等。SelectListItem的屬性),所以你的腳本需要是

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

我是新來的,所以這可能是不正確的。 嘗試

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

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

,而不是你寫什麼。

我需要一些更多信息。你可以分享github回購嗎?

我的工作非常類似的東西,這就是我所做的:

(只看呈現從線85至96功能) https://github.com/stephenhu3/codepal/blob/development/js/youtubeComponent.js

它爲我工作。