当通过 javascript/jquery 更改值时，多个选择不会更新

我有一个多重选择，其中每个选项都设置了一个类。 根据类别，我可以预先选择特定类别的所有选项，因此用户不必自己选择所有选项。 到目前为止，它运行良好，直到我通过单击手动选择一个选项。从现在开始，预选似乎不再起作用了。但只有视觉效果不再起作用，选项仍然会应用“selected=”selected”。另外，选择上的 .val() 返回预选择器选择的所有值。因此，在后台一切正常，但用户看不到它的工作。

这是我的选择：

<select class="form-control d-block w-100 col-8 col-xl-12" id="brand-select" name="brands" size="15" multiple>
    <c:forEach var="brand" items="${brands}">
        <option class='<c:choose>
                            <c:when test="${brand.isCompanyBrand()}">COMPANYBRAND</c:when>
                            <c:otherwise>FOREIGNBRAND</c:otherwise>
                        </c:choose>' value="${brand.brandCode}">${brand.description}
        </option>
    </c:forEach>
</select>

这是选择器之一：

selectCompanyBrands.addEventListener("click", function()
{
    $("#brand-select option").attr("selected", false)
    $("#brand-select option.COMPANYBRAND").attr("selected", true);
}, false);

我目前不知道如何解决这个问题。

在 jquery 中阅读此内容doc我引用具体内容：

属性与属性

属性和特性之间的区别在以下方面可能很重要： 具体情况。在 jQuery 1.6 之前，.attr() 方法有时 检索某些属性时考虑属性值， 这可能会导致不一致的行为。从 jQuery 1.6 开始，.prop() 方法提供了一种显式检索属性值的方法，而 .attr() 检索属性。

Jquery，或者更确切地说是它的更高版本，清楚地区分了属性 and 特性。所以简单的规则是，如果你想设置一个property（与用户操作相关的东西，例如表单元素）使用#prop()并以其他方式使用#attr().

在这里你应该使用#prop像这样：

selectCompanyBrands.addEventListener("click", function() {
    $("#brand-select option").prop("selected", false)
    $("#brand-select option.COMPANYBRAND").prop("selected", true);
}, false);