無法找到需要填充的DropDownList

Question

我目前在頁面上有兩個下拉列表框。第一個在用戶進入頁面時可見，並加載了大約12個條目。另一個下拉列表使用樣式隱藏，直到在第一個下拉列表中進行選擇。在做出選擇後，第一個ddl上的更改事件觸發對我的Controller的ajax調用，以獲取填充第二個ddl所需的數據。 ajax調用正在獲取正確的數據，所以在這裏一切都很好。

當我嘗試填充第二個ddl時，麻煩來了。從Json返回後，jQuery無法找到我的第二個ddl。我所得到的是一個「未定義」的錯誤，指向我嘗試dataBind返回的數據時。

以下是代碼。

查看

<table width="100%"> 
    <tr> 
     <td class="adminTitle"> 
      @Html.NopLabelFor(model => model.SpecificationAttribute): 
     </td> 
     <td class="adminData"> 
      @Html.DropDownListFor(model => model.SpecificationAttribute, new SelectList(Model.SpecificationAttributes, "Id", "Name"), "Select a Specification Attribute") 
     </td> 
    </tr>   
    <tr> 
     <td class="adminTitle"> 
      <div class="SAOptions" style="display:none"> 
       @Html.NopLabelFor(model => model.SpecificationAttributeOption): 
      </div> 
     </td> 
     <td class="adminData"> 
      <div class="SAOptions" style="display:none"> 
       @Html.DropDownListFor(model => model.SpecificationAttributeOptions, Enumerable.Empty<SelectListItem>()) 
      </div> 
     </td> 
    </tr> 
</table> 
<script type="text/javascript"> 
    $("#SpecificationAttribute").change(function() { 
     var specificationAttributeId = $("#@Html.FieldIdFor(model => model.SpecificationAttribute)").val(); 
     //User selected one of the Specification Attributes 
     if (specificationAttributeId != "") { 
      //Show the Specification Attribute Options 
      $(".SAOptions").show(); 

      //Load the now showing dropdownlist 
      $.getJSON('@Url.Action("GetSpecificationAttributeOptions", "Reports")', { specificationAttributeId: specificationAttributeId }, function (data) { 
       //************************** 
       //This is not finding my ddl 
       //************************** 
       var ddl = $("#SpecificationAttributeOptions").data("tDropDownList"); 
       alert(ddl != null); 
       if (data.length > 0) { 
        //Bind data and reload 
        //******************** 
        //Breaks here 
        //******************** 
        ddl.dataBind(data); 
        ddl.reload(); 
       } 
      }); 
     } 
     //User selected "Select a Specification Option" for some reason, so hide everything 
     else { 
      $(".SAOptions").hide(); 
      $("#divOptions").hide(); 
     } 
}); 

控制器

public ActionResult ProductBySpecificationAttribute() 
    { 
     if (!_permissionService.Authorize(StandardPermissionProvider.ManageReports)) 
      return AccessDeniedView(); 

     var model = new SpecificationAttributeReportListModel(); 
     var specificationAttributes = _specificationAttributeService.GetSpecificationAttributes(); 
     var specificationAttributesModel = PrepareSpecificationAttributeModel(specificationAttributes); 
     model.SpecificationAttributes = specificationAttributesModel; 

     //Return Model data 
     return View(model); 
    } 

    public JsonResult GetSpecificationAttributeOptions(int specificationAttributeId) 
    { 
     var specificationAttributeOptions = _specificationAttributeService.GetSpecificationAttributeOptionsBySpecificationAttribute(specificationAttributeId); 
     var specificationAttributeOptionsModel = PrepareSpecificationAttributeOptionsModel(specificationAttributeOptions); 
     var returnData = new SelectList(specificationAttributeOptionsModel, "Id", "Name"); 
     return Json(returnData, JsonRequestBehavior.AllowGet); 
    } 

我有一種感覺，它的東西簡單，但我還沒有想通出來呢。我知道如果我實施不同的DDL，它的工作原理。但是，我希望所有東西都流在一起，所以我使用這個ddl（不是通過選擇，而僅僅是爲了全局的一致性）。

任何幫助將不勝感激。

最親切的問候， 乍得約翰遜

Answer 1

於是我想出了自己的解決方案。我用普通的替換了ddl的HTML.DropDownList。這使我能夠以不同方式構建我的下拉列表。這是我所做的。

查看

<table width="100%"> 
    <tr> 
     <td class="adminTitle"> 
      @Html.NopLabelFor(model => model.SpecificationAttribute): 
     </td> 
     <td class="adminData"> 
      @Html.DropDownListFor(model => model.SpecificationAttribute, new SelectList(Model.SpecificationAttributes, "Id", "Name"), "Select a Specification Attribute") 
     </td> 
    </tr>   
    <tr> 
     <td class="adminTitle"> 
      <div class="SAOptions" style="display:none"> 
       @Html.NopLabelFor(model => model.SpecificationAttributeOption): 
      </div> 
     </td> 
     <td class="adminData"> 
      <div class="SAOptions" style="display:none"> 
       <select id="SpecificationAttributeOptions"></select> 
      </div> 
     </td> 
    </tr> 
</table> 
<script type="text/javascript"> 
//Change event for SpecificationAttribute 
    $("#SpecificationAttribute").change(function() { 
     var specificationAttributeId = $("#@Html.FieldIdFor(model => model.SpecificationAttribute)").val(); 
     //User selected one of the Specification Attributes 
     if (specificationAttributeId != "") { 
      //Show the Specification Attribute Options 
      $(".SAOptions").show(); 

      //Load the now showing dropdownlist 
      $.getJSON('@Url.Action("GetSpecificationAttributeOptions", "Reports")', { specificationAttributeId: specificationAttributeId }, function (data) { 
       var ddl = $("#SpecificationAttributeOptions"); 
       if (data.length > 0) { 
        //Clear data from dropdownlist 
        ddl.html(''); 

        //Bind dropdownlist 
        var elements = ""; 
        $.each(data, function (id, option) { 
         elements += '<option value="' + option.id + '">' + option.name + '</option>' 
        }); 
        ddl.append(elements); 
       } 
      }); 
     } 
     //User selected "Select a Specification Option" for some reason, so hide everything 
     else { 
      $(".SAOptions").hide(); 
     } 
    }); 
</script> 

控制器

public ActionResult ProductBySpecificationAttribute() 
    { 
     if (!_permissionService.Authorize(StandardPermissionProvider.ManageReports)) 
      return AccessDeniedView(); 

     var model = new SpecificationAttributeReportListModel(); 
     var specificationAttributes = _specificationAttributeService.GetSpecificationAttributes(); 
     var specificationAttributesModel = PrepareSpecificationAttributeModel(specificationAttributes); 
     model.SpecificationAttributes = specificationAttributesModel; 

     //Return Model data 
     return View(model); 
    } 

/// <summary> 
    /// Used to load dropdownlist for SpecificationAttributeOptions 
    /// </summary> 
    /// <param name="specificationAttributeId">SpecificationAttribute Identifier</param> 
    /// <returns>Json data to build dropdownlist</returns> 
    public JsonResult GetSpecificationAttributeOptions(int specificationAttributeId) 
    { 
     //Get the SpecificationAttributeOptions for this SpecificationAttributeId 
     var specificationAttributeOptions = _specificationAttributeService.GetSpecificationAttributeOptionsBySpecificationAttribute(specificationAttributeId); 
     //Load data into SpecificationAttributeOptionModel 
     var specificationAttributeOptionsModel = PrepareSpecificationAttributeOptionsModel(specificationAttributeOptions); 
     //Pluck Id and Name from data 
     var returnData = (from sao in specificationAttributeOptionsModel select new { id = sao.Id, name = sao.Name }).ToList(); 
     //Return specific data 
     return Json(returnData, JsonRequestBehavior.AllowGet); 
    } 

感謝所有的答案，並試圖幫助。我讚賞它。希望這可以幫助可能遇到同樣問題的其他人。

Answer 2

var ddl = $("#SpecificationAttributeOptions").data("tDropDownList"); 

該行正試圖讓連接到您的DropDownList的tDropDownList數據。它不會返回您的ddl，它可能會返回undefined，因爲沒有附加到您的ddl的數據。

這裏看到更多的信息：http://api.jquery.com/data/