选择多选元素时的行为不一致

Inconsistent behaviour when selecting multi-select element

本文关键字：不一致 元素 选择      更新时间：2023-09-26

我有一个模式对话框，它有一个多选表单元素。在屏幕上，我有两个按钮，每个按钮都有不同的相关选项（一个与"Admins"相关，另一个与"Users"相关）

当用户单击任何按钮时，jQuery会识别该按钮与哪个选项关联，然后在模式对话框中的多选列表元素上预先选择该选项。到目前为止一切都很好。如果我只做一次，这个功能就可以工作，但如果我重复做，或者选择一个按钮，然后选择另一个按钮时，选项不会显示为预先选择的。我无法确定错误在哪里。

任何见解都值得赞赏-链接到jsFiddle

jQuery代码如下-不确定如果我随机选择按钮，为什么会出现不一致的行为

$(document).on("click", ".btn", function () {
    $('.modal-body #name').val('John');
    $('.modal-body #email').val('john@acme.com');
    var groupNames = $(this).data('group-names');
    $('.modal-body #groups > option').each(function () {
        if (groupNames.search($(this).text()) == 0) {
            $(this).attr('selected', true);
        } else {
            $(this).attr('selected', false);
        }
    });
});

尝试使用val()设置<select>的值。这比在每个选项上循环要简单得多

$(document).on("click", ".btn", function () {
    var groupNames = $(this).data('group-names');
    $('.modal-body #groups').val(groupNames);
});

DEMO

@charlietfl的响应是最好的方法。但是，您的代码工作不一致的原因（在某些浏览器中）是您应该设置所选的属性，而不是属性，如下所示：

$(this).prop('selected', 'selected');
相关文章：