0

我目前在一个页面上有两个下拉列表框。当用户进入页面并加载大约 12 个条目时，第一个可见。另一个下拉列表使用样式隐藏，直到在第一个下拉列表中进行选择。做出选择后，第一个 ddl 上的更改事件会触发对我的 Controller 的 ajax 调用，以获取填充第二个 ddl 所需的数据。ajax 调用正在获取正确的数据，所以一切都很好。

当我尝试填充第二个 ddl 时，问题就出现了。从 Json 返回后，jQuery 无法找到我的第二个 ddl。我得到的只是一个“未定义”错误，它指向当我尝试对返回的数据进行数据绑定时。

下面是代码。

看法

<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（不是出于选择，而是为了保持整体的一致性）。

任何帮助将非常感激。

最诚挚的问候，查德·约翰逊

4

2 回答 2

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

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

请参阅此处了解更多信息：http ://api.jquery.com/data/

于 2012-11-26T19:39:40.650 回答
0

所以我想出了自己的解决方案。我将辅助 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);
    }

感谢所有人的回答并试图提供帮助。我很感激。希望这可以帮助可能遇到相同问题的其他人。

于 2012-11-27T14:08:24.823 回答