Question

我目前在页面上有两个下拉列表框。当用户进入页面并加载大约12个条目时，第一个是可见的。使用样式隐藏另一个下拉列表，直到在第一个下拉列表中进行选择。在进行选择时，第一个ddl上的change事件会触发对我的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

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

该行正在尝试将tDropDownList数据附加到DropDownList。它不会返回您的ddl，它可能会返回undefined，因为您的ddl没有附加数据。

有关详细信息，请参阅此处：http://api.jquery.com/data/

Answer 2

所以我提出了自己的解决方案。我用简单替换了辅助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);
    }

感谢大家的答案，并努力提供帮助。我很感激。希望这可以帮助可能遇到同样问题的其他人。

无法找到需要填充的DropDownList

2 个答案: