Javascript 重置元素后刷新dropdownlist

我有一个asp.NETMVC2应用程序，还有一些定义两个dropdownlists行为的jquery。当其中一个发生更改时，另一个将填充过滤后的数据。在经历了大量的骚动之后，我让jquery工作了，并通过firebug调试确认了这一点，但我的dropdownlist并没有刷新。这是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>

$（函数（）{
$（'#cid'）。更改（函数（）{
var coid=$（this.val（）；
$.post（“/TimeTracking/FilterFieldOffices”，{companyId:coid}，函数（数据）{
$（“#foid”）.loadSelect（数据）；
});
});
});
$（函数（）{
$.fn.loadSelect=函数（数据）{
返回此。每个（函数（）{
this.options.length=0；
$.each（数据、函数（索引、项数据）{
var option=新选项（itemData.Text，itemData.Value）；
添加（选项）；
});
});
};
});

这是我的控制器动作

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

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

        return Json(returnList);
    }

public ActionResult过滤器字段办公室（int companyId=0）
{
IList list=_fodp.GetFieldOfficesForCompany（companyId）；
var returnList=新选择列表（列表，“Id”、“设施名称”）；
returnjson（returnList）；
}

因此，我知道dropdownlist中填充了正确的数据，但是查看页面上的dropdownlist没有刷新。我对JQuery的了解有限，因此如果我遗漏了n00b之类的内容，请温柔一点。

试试这个：

$(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中捕获

这个

，因为在内部它不再指向

select

元素

完整工作示例：

型号：

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

公共类项目
{
公共int值{get；set；}
公共字符串文本{get；set；}
}
公共类MyViewModel
{
public int？SelectedCompanyId{get；set；}
public int？SelectedFieldOfficeId{get；set；}
公共IEnumerable公司{get；set；}
公共IEnumerable现场办公室{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
        }));
    }
}

[HandleError]
公共类HomeController:控制器
{
公共行动结果索引（）
{
var模型=新的MyViewModel
{
公司=可枚举。范围（1，5）。选择（i=>newitem
{ 
值=i，
Text=“公司”+i
}),
FieldOffice=可枚举的.Empty（）
};
返回视图（模型）；
}
公共行动结果过滤器现场办公室（int companyId）
{
返回Json（Enumerable.Range（1，3）。选择（i=>newitem
{
值=i，
Text=“现场办公室”+i
}));
}
}

视图：

$（函数（）{
$（'#cid'）。更改（函数（）{
var coid=$（this.val（）；
$.post（“”，{companyId:coid}，函数（数据）{
$（'#foid'）.loadSelect（数据）；
});
});
});
$（函数（）{
$.fn.loadSelect=函数（数据）{
返回此。每个（函数（）{
this.options.length=0；
var选择=这个；
$.each（数据、函数（索引、项数据）{
var option=新选项（itemData.Text，itemData.Value）；
$（选择）.append（选项）；
});
});
};
});
x、 SelectedCompanyId，new SelectList（Model.companys，“Value”，“Text”），new{id=“cid”}%>
x、 SelectedFieldOfficeId，new SelectList（Model.FieldOffices，“值”，“文本”），new{id=“foid”}%>

BOOYEA！几周来一直在做这件事，最终f-ing解决了它！谢谢

<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" />
<% } %>