javascript - 用于级联下拉列表的通用 jquery 函数 (asp.net mvc)

Question

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

 $(document).ready(function () {
            $('#ddlIl').change(function () {
                $.ajax({
                    type: "post",
                    url: "/Users/GetIlce",
                    data: { Id: $('#ddlIl').val() },
                    datatype: "json",
                    traditional: true,
                    success: function (data) {
                        var ilce = "<select id='ddlIlce'>";
                        ilce = ilce + '<option value="">--Seçin--</option>';
                        for (var i = 0; i < data.length; i++) {
                            ilce = ilce + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
                        }
                        ilce = ilce + '</select>';
                        $('#ddlIlce').html(ilce);
                    }
                });
            });
        });

我有以下下拉列表:州、城市、部门、医院和医生

Answer 1

如果您想将 AJAX 调用包装在一个函数中以提供 View 中的所有下拉列表，下面的代码可能适用于它们:

/*
 *  @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);
        }
    });
}

在change事件中的用法:

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

注意:上面的函数假设目标下拉列表已在 View 页面中创建，并且您只想插入选项元素值而不重新创建 select 元素。如果您想创建新的目标下拉列表，请修改如下函数:

/*
 *  @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');
    });
});

工作示例:.NET Fiddle