javascript - Bootstrap 多选 : clicking on dropdown disables all input and button elements on panel

Question

我正在扩展一个网页，让用户选择一个类型(对应于部门、部门、位置等引用表)，因此现有代码生成 HTML，呈现所选类型的记录表以供编辑:名称、描述的文本框，状态的单选下拉列表，更新按钮。新类型需要一个多选下拉列表，并选择当前值。 bootstrap multiselect 渲染得很好——我在包含它们的记录上看到了当前值，而其他的则为“未选择”。当我单击下拉菜单时，它与 Bootstrap 面板上的所有其他输入/选择/按钮一起被禁用。

这是CSS:

<link href="/Content/jquery-ui.css" rel="stylesheet">
<link href="/Content/jquery-ui-timepicker-addon.css" rel="stylesheet">
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/site.css" rel="stylesheet">
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet">
<link href="/Content/Datatables/datatables.bootstrap.css" rel="stylesheet">
<link href="/Content/Datatables/fixedHeader.bootstrap.css" rel="stylesheet">
<link href="/Content/Datatables/responsive.bootstrap.css" rel="stylesheet">
<link href="/Content/Datatables/select.bootstrap.css" rel="stylesheet">

这是脚本:

<script src="/Scripts/jquery-2.2.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-filestyle.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/bootstrap-multiselect-collapsible-groups.js"></script>
<script src="/Scripts/jquery-validate.js"></script>
<script src="/Scripts/jquery-validate-unobtrusive.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery-ui-timepicker-addon.js"></script>
<script src="/Scripts/DataTables/jquery.datatables.js"></script>
<script src="/Scripts/DataTables/datatables.bootstrap.js"></script>
<script src="/Scripts/DataTables/datatables.fixedHeader.js"></script>
<script src="/Scripts/DataTables/datatables.responsive.js"></script>
<script src="/Scripts/DataTables/datatables.select.js"></script>

这里是我生成包含要更新的记录的 HTML 表格的地方:

var siteRoot = '@Url.Content("~/")';

/* functionality and field are selected from dropdowns on the page; they identify which type (i.e. reference table) to update.
field 'baseline' is the one that needs a multiselect.
*/
var populateTable = function (functionality, field) {
    $("#dataGridPanel table tbody").html("");
    getDataValues(functionality, field)
        .success(function (data) {
            if (data != null) {
                createTableForFieldType($("#dataGridPanel table"), functionality, field, data);
            }
        });
}
    
var getDataValues = function (functionality, fieldName) {
    return $.ajax({
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        type: "POST",
        url: siteRoot + "DataManagement/GetEntityValues",
        data: JSON.stringify({
            "functionality": functionality,
            "fieldName": fieldName
        })
    });
};

var createTableForFieldType = function (table, functionality, fieldName, rowData) {
    table = $(table);
    table.html("");
    table.append($(document.createElement("thead")).append(createTableHeaderRow(fieldName)));
    table.append($(document.createElement("tbody")));

    switch (fieldName) {
        case "baseline":
            getDataValues(functionality, "operatingsystem").success(function (dependencyData) {
                for (var i = 0; i < rowData.length; i++) {
                    $("tbody", table).append(createTableUpdateRow(functionality, fieldName, rowData[i]));
                }
                /* load all Baseline OS dropdowns with all OS values */
                var dropdowns = $("select.operatingsystem");

                for (var i = 0; i < dependencyData.length; i++) {
                    var option = $(document.createElement("option")).val(dependencyData[i].Id).text(dependencyData[i].Name);
                    dropdowns.append(option);
                }

                dropdowns.each(function () {
                    $(this).multiselect();
                });

                /* select the current value(s), stored in an attribute of each select as a comma-separated string of OSIds, in createTableUpdateRow */
                dropdowns.each(function () {
                    var OSIds = $(this).attr("osids");
                    if (OSIds.length > 0)
                    {
                        var OSIdArray = OSIds.split(",");
                        $(this).multiselect("select", OSIdArray);
                    }
                    $(this).multiselect("refresh");
                });
            });
            break;
        default:
            table.append(createTableAddRow(fieldName));
            for (var k = 0; k < rowData.length; k++) {
                $("tbody", table).append(createTableUpdateRow(functionality, fieldName, rowData[k]));
            }
            break;
    }
};

删除了不相关代码的 createTableUpdateRow 函数(多选下拉列表是操作系统 ID/名称列表):

var createTableHeaderRow = function (fieldName) {
    var row = $(document.createElement("tr"));
    var headerNames = [];

    switch (fieldName) {
        case "baseline":
            headerNames = ["Name", "Status", "Description", "SourceId", "OS", "Last Modified By", "Last Modified Date"];
            break;
    }

    for (var i = 0; i < headerNames.length; i++) {
        row.append($(document.createElement("td")).text(headerNames[i]));
    }

    return row;
};

var createTableUpdateRow = function (functionality, fieldName, rowData) {
    var row = $(document.createElement("tr")).attr("data-forid", rowData.Id || rowData.UniqueId);
    var cellContents = [];

    var lastModifiedDate = rowData.LastModifiedDate == null ? null : new Date(parseInt(rowData.LastModifiedDate.substr(6)));
    var dateFormatted = (lastModifiedDate != null ? lastModifiedDate.toDateString() : "");

    var statusSelect = "<select class=\"form-control status\">" +
        "<option value=\"\"" + (rowData.Status == null ? " selected=\"selected\"" : "") + ">--Select a Status--</option>" +
        "<option value=\"1\"" + (rowData.Status === 1 ? " selected=\"selected\"" : "") + ">Active</option>" +
        "<option value=\"0\"" + (rowData.Status === 0 ? " selected=\"selected\"" : "") + ">Inactive</option>" +
        "</select>";

    var dependentSelect = $(document.createElement("select")).addClass("form-control");

    switch (fieldName) {
        case "baseline":
            /* attr("osids") has the current comma-separated OSId values */
            var multiSelect = $(document.createElement("select")).addClass("operatingsystem").attr("multiple", "multiple").attr("osids", rowData.OSIds == null ? "" : rowData.OSIds);
            /* multiSelect.append("<option value=\"\"" + (rowData.Id == null ? " selected=\"selected\"" : "") + ">--Select an OS--</option>"); */
            cellContents = [
                rowData.Name,
                statusSelect,
                rowData.Description,
                rowData.SourceId,
                multiSelect,
                rowData.LastModifiedByUserId,
                dateFormatted,
                $(document.createElement("button")).attr("data-action", "update").attr("data-forid", rowData.Id).attr("type", "button").addClass("btn btn-primary").html("Update")
            ];
            break;
        default:
            break;
    }

    for (var i = 0; i < cellContents.length; i++) {
        row.append($(document.createElement("td")).append(cellContents[i]));
    }

    return row;
};

Answer 1

解决了。在代码的其他地方，面板中所有按钮元素的单击事件正在检查数据值。有问题的按钮是添加和更新按钮(即数据值“添加”或“更新”)。引入多选添加了另一个按钮元素。我添加了一些代码以使该事件处理程序忽略多选按钮，现在一切正常。