Multiple selection is not updated when changing value through javascript / jquery

Question

I have multiple choices where each parameter has a class set for it. Depending on the class, I can pre-select all the parameters with a specific class so that the user cannot select them independently. So far this works fine, right up until the moment when I manually select one option by clicking on it. From now on, the preliminaries seem to no longer work. BUT only the visual effects no longer work, the parameters still get the selected "selected =" "". Also .val () in the element returns all the values ​​selected by the selector. So in the background everything is working fine, but the user does not see that it worked.

Here is my choice:

<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);

, .

Answer 1

jquery doc, :

. jQuery 1.6 .attr() , . jQuery 1.6,.prop() , .attr() .

JQuery, , , . , , (-, , ), #prop() #attr().

#prop :

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

Answer 2

, . prop():

$(document).ready(function() {
  $("select option").prop("selected", false)
  $('select option.someclass').prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" size="15">
<option class="someclass">some option</option>
<option class="someclass">some option</option>
<option class="newclass">some option</option>
<option class="someclass">some option</option>
<option class="someclass">some option</option>
<option class="newclass">some option</option>
<option class="newclass">some option</option>
<option class="newclass">some option</option>
<option class="someclass">some option</option>
<option class="someclass">some option</option>
<option class="someclass">some option</option>
</select>

Hide result