Question

我有一个模式对话框，它有一个多选表单元素。在屏幕上，我有两个按钮 - 每个按钮都有不同的选项（一个与'管理员'相关联，另一个与'用户'相关联）

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

赞赏任何见解 - link to 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);
        }
    });

});

Answer 1

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

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

的 DEMO

Answer 2

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

$(this).prop('selected', 'selected');

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

2 个答案: