javascript - 使用 JQuery 更新 Html.Dropdownlists

Question

我在这里找到了这个解决方案 How to update strongly typed Html.DropDownList using Jquery我正在尝试实现它，但其中出现了一些错误。

$(function() {
    $('#cid').change(function() {
        var selectedCompany = $(this).val();
        var ddl = $("#foid");
        $.post("/TimeTracking/FilterFieldOffices", { companyId: selectedCompany }, function (data) {
            $(ddl).loadSelect(data);
        });
    });
});

(function($) {
    $.fn.emptySelect = function() {
        return this.each(function() {
            if (this.tagName == 'SELECT') this.options.length = 0;
        });
    }

    $.fn.loadSelect = function(optionsDataArray) {
        return this.emptySelect().each(function() {
            if (this.tagName == 'SELECT') {
                var selectElement = this;
                $.each(optionsDataArray, function(index, optionData) {
                    var option = new Option(optionData.Text, optionData.Value);

                    if ($.browser.msie) {
                        selectElement.add(option);
                    }
                    else {
                        selectElement.add(option, null);
                    }
                });
            }
        });
    }
})(jQuery);

我的 Controller 返回我想要的选择列表。

public ActionResult FilterFieldOffices(int companyId = 0)
    {
        IList<FieldOffice> list = _fodp.GetFieldOfficesForCompany(companyId);

        var returnList = new SelectList(list, "Id", "FacilityName");

        return Json(returnList);
    }

我知道 .change 函数是通过放置警报来触发的，并且我知道我的 Controller 函数是通过断点调用的，因此将其范围缩小到 loadselect 函数，但是我无法再缩小范围，因为没有警报会火内负载选择功能。我没有足够的 JQuery 经验来形成对问题的看法。所以我问是否有人在我尝试做的事情上取得了成功，或者您是否可以看到代码有问题。 在有人问之前，是的，我已经检查了括号。

编辑忘记提及我检查了 Firefox 的错误控制台，并收到错误:

$(ddl).loadSelect is not a function.

编辑找到一个资源，其中提到当您有两个冲突的框架时，就会出现我描述的错误。所以我放入 jQuery.noConflict();但它仍然不起作用。

Answer 1

非常奇怪，但我想出了一个可以突破点的解决方案。

<script type="text/javascript">

        $(function () {
            $('#cid').change(function () {
                var coid = $(this).val();
                $.post("/TimeTracking/FilterFieldOffices", { companyId: coid }, function (data) {
                    $("#foid").loadSelect(data); 
                });
            });
        });

        $(function () {
            $.fn.loadSelect = function (data) {
                return this.each(function () {
                    this.options.length = 0;
                    $.each(data, function (index, itemData) {
                        var option = new Option(itemData.Text, itemData.Value);
                        this.add(option);
                    });
                });
            };
        });

    </script>

我所要做的就是将没有被调用的函数包装在 $(function() {//Code here }); 但是我仍然遇到一些麻烦。我为它创建了一个新页面。

Refreshing a dropdownlist after elements have been reset