刷新一个DropDownList后，元素已被重置 [英] Refreshing a dropdownlist after elements have been reset

问题描述

我有一个asp.net MVC 2的应用程序，并且有一些jQuery定义了两个dropdownlists的行为。当一个人改变，另一种是填充过滤后的数据。很多愤怒之后，我有jQuery的工作，由萤火虫调试证实，但我的DropDownList不清爽。这是jQuery的

i have an asp.net mvc 2 application, and have some jquery that defines behaviour of two dropdownlists. When one changes, the other is populated with filtered data. After much furor, i have the jquery working, confirmed by firebug debugging, but my dropdownlist is not refreshing. This is the jquery

<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>

这是我的控制器动作

And here is my controller action

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

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

        return Json(returnList);
    }

所以，我知道的DropDownList中填充正确的数据，但视图页面上DropDownList的不清爽。我有限的知识与jQuery，因此，如果即时缺少的东西一样的n00b温柔。

So, i know that dropdownlist is being filled with the correct data, but the dropdownlist on the view page is not refreshing. I have limited knowledge with JQuery, so if im missing something n00b like be gentle.

推荐答案

试试这个：

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

请注意，我们需要捕获这个在外层的foreach，因为在内部它不再指向选择元素。

Notice that we need to capture this in the outer foreach because in the inner it no longer points to the select element.

全部工作的例子：

型号：

public class Item
{
    public int Value { get; set; }
    public string Text { get; set; }
}

public class MyViewModel
{
    public int? SelectedCompanyId { get; set; }
    public int? SelectedFieldOfficeId { get; set; }
    public IEnumerable<Item> Companies { get; set; }
    public IEnumerable<Item> FieldOffices { get; set; }
}

控制器：

[HandleError]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            Companies = Enumerable.Range(1, 5).Select(i => new Item
            { 
                Value = i, 
                Text = "Company " + i 
            }),
            FieldOffices = Enumerable.Empty<Item>()
        };
        return View(model);
    }

    public ActionResult FilterFieldOffices(int companyId)
    {
        return Json(Enumerable.Range(1, 3).Select(i => new Item
        {
            Value = i,
            Text = "Field offfice " + i
        }));
    }
}

查看：

<script type="text/javascript" src="<%= Url.Content("~/scripts/jquery-1.4.1.js") %>"></script>
<script type="text/javascript">
    $(function () {
        $('#cid').change(function () {
            var coid = $(this).val();
            $.post('<%= Url.Action("FilterFieldOffices") %>', { companyId: coid }, function (data) {
                $('#foid').loadSelect(data);
            });
        });
    });

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

</script>

<% using (Html.BeginForm()) { %>
    <%: Html.DropDownListFor(x => x.SelectedCompanyId, new SelectList(Model.Companies, "Value", "Text"), new { id = "cid" })%>
    <%: Html.DropDownListFor(x => x.SelectedFieldOfficeId, new SelectList(Model.FieldOffices, "Value", "Text"), new { id = "foid" })%>
    <input type="submit" value="OK" />
<% } %>

这篇关于刷新一个DropDownList后，元素已被重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！