Javascript 用于级联下拉列表的通用jquery函数（asp.net mvc）

我正在开发一个医疗预约系统，我正在使用jquery函数来过滤级联下拉列表中的项目。有没有一种方法可以编写一个“泛型”来处理所有的dropdownlists，而不是多次编写相同的内容

$（文档）.ready（函数（）{
$（'#ddlIl'）。更改（函数（）{
$.ajax({
类型：“post”，
url:“/Users/GetIlce”，
数据：{Id:$（'#ddlIl'）.val（）}，
数据类型：“json”，
传统的：是的，
成功：功能（数据）{
var ilce=“”；
ilce=ilce+'--Seçin--'；
对于（变量i=0；i});如果您想将AJAX调用包装到一个函数中，以服务于视图中的所有DropDownList，下面的代码可能适用于它们：

/*
 *  @param url = URL to fetch data (i.e. controller action method 
 *               returning IEnumerable<SelectListItem> or SelectList)
 *  @param source = source dropdownlist name
 *  @param target = target dropdownlist name
 */
function cascadeDropDownList(url, source, target) {
    $.ajax({
        type: 'POST',
        url: url,
        data: { Id: $('#' + source).val() },
        dataType: 'json',
        traditional: true,
        success: function (data) {
            // remove previous option contents first
            $('#' + target + ' option').each(function() {
                $(this).remove();
            });

            // add new option contents
            var options = '<option value="">--Seçin--</option>';
            for (var i = 0; i < data.length; i++) {
                options += '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
            }
            $('#' + target).html(options);
        }
    });
}

注意：上面的函数假设目标dropdownlist已经在视图页面中创建，您只想插入选项元素值，而不需要重新创建
select
元素。如果要创建新的目标dropdownlist，请修改如下函数：

/*
 *  @param url = URL to fetch data (i.e. controller action method 
 *               returning IEnumerable<SelectListItem> or SelectList)
 *  @param source = source dropdownlist name
 *  @param target = target element (e.g. div)
 *  @param ddlName = target dropdownlist name
 */
function cascadeDropDownList(url, source, target, ddlName) {
    $.ajax({
        type: 'POST',
        url: url,
        data: { Id: $('#' + source).val() },
        dataType: 'json',
        traditional: true,
        success: function (data) {
            var ddl = "<select id='" + ddlName + "'>";
            ddl += '<option value="">--Seçin--</option>';
            for (var i = 0; i < data.length; i++) {
                ddl += '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
            }
            ddl += '</select>';
            $('#' + target).html(ddl);
        }
    });
}

工作示例：
谢谢，这正是我所需要的
/*
 *  @param url = URL to fetch data (i.e. controller action method 
 *               returning IEnumerable<SelectListItem> or SelectList)
 *  @param source = source dropdownlist name
 *  @param target = target element (e.g. div)
 *  @param ddlName = target dropdownlist name
 */
function cascadeDropDownList(url, source, target, ddlName) {
    $.ajax({
        type: 'POST',
        url: url,
        data: { Id: $('#' + source).val() },
        dataType: 'json',
        traditional: true,
        success: function (data) {
            var ddl = "<select id='" + ddlName + "'>";
            ddl += '<option value="">--Seçin--</option>';
            for (var i = 0; i < data.length; i++) {
                ddl += '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
            }
            ddl += '</select>';
            $('#' + target).html(ddl);
        }
    });
}

$(document).ready(function () {
    $('#ddlIl').change(function () {
        var url = '/Users/GetIlce'; // recommended: '@Url.Action("GetIlce", "Users")'
        var source = $(this).attr('id');
        var target = $('#targetdiv').attr('id');
        cascadeDropDownList(url, source, target, 'ddlIlce');
    });
});