title: Multiple select not updating when value changed through javascript/jquery
body: <p>I have a multiple select where each option has a class set to it.
   Depending on the class i can pre-select all options with a specific class so the user doesn't have to select them all by himself. 
  So far it works fine, till to the point where i manually select one option by clicking on it. From this point on the pre-selects seem to don't work anymore. BUT only the visuals don't work anymore, the options still get the 'selected="selected"' applied to them. Also .val() on the select returns all values selected by the pre-selector. So in the background everything works fine, but the user can't see that it worked.</p>
  
  <p>Here's my select:</p>
  
  <pre><code>&lt;select class="form-control d-block w-100 col-8 col-xl-12" id="brand-select" name="brands" size="15" multiple&gt;
      &lt;c:forEach var="brand" items="${brands}"&gt;
          &lt;option class='&lt;c:choose&gt;
                              &lt;c:when test="${brand.isCompanyBrand()}"&gt;COMPANYBRAND&lt;/c:when&gt;
                              &lt;c:otherwise&gt;FOREIGNBRAND&lt;/c:otherwise&gt;
                          &lt;/c:choose&gt;' value="${brand.brandCode}"&gt;${brand.description}
          &lt;/option&gt;
      &lt;/c:forEach&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And here's one of the selectors:</p>
  
  <pre><code>selectCompanyBrands.addEventListener("click", function()
  {
      $("#brand-select option").attr("selected", false)
      $("#brand-select option.COMPANYBRAND").attr("selected", true);
  }, false);
  </code></pre>
  
  <p>I'm currently out of ideas what i can do to resolve this problem. </p>