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

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

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

任何见解都值得赞赏-

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（）

设置

的值。这比在每个选项上循环要简单得多

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

---

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

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

---

2个问题-1。如果一个按钮有多个组与之关联，这是否有效？换句话说，这是一个多选方案。2.与这些选项相关联的实际值与显示的文本不同——因此，当用户提交模式表单时——这种方法不会给表单处理者带来问题吗？我只是尝试将组名值更改为“Admins，Users”，但这不起作用-如果我有多个选项，那么我将hvae循环-或者我是否不正确？将该值用作数据，而不是文本。对于multiple，可以将数组传递给

val（）

，数据属性也可以是arrayNote，对于data Attribit中的数组，它必须是有效的JSON，因此需要转义或使用单引号来包装数组。我使用了单引号。您还可以使用任何分隔符，而不使用此JSON，并使用

split（分隔符）

要从数据属性中的字符串值创建数组，一般经验法则是在

上始终具有

值
属性，并且不将任何值设置为空字符串。我认为，自从我们使用文本作为价值观以来，一些混乱可能就是从这里开始的