Question

我正在使用医疗预约系统，并且我使用jquery功能来过滤我级联下拉列表中的项目。有没有办法写一个＆＃39;泛型＆＃39;处理所有下拉列表而不是多次写同样的东西？

＆＃13;

 $(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);
                    }
                });
            });
        });

＆＃13;

我有以下下拉列表：州，市，部门，医院和医生

Answer 1

如果你想在函数中包装AJAX调用以提供视图中的所有下拉列表，可能下面的代码适用于它们：

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

注意：上面的函数假设已经在视图页面中创建了目标下拉列表，并且您只想插入选项元素值而不重新创建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

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

1 个答案: