javascript/jqueryで値が変更されたときに複数の選択が更新されない

Question

各オプションにクラスが設定されている複数選択があります。 クラスによっては、特定のクラスですべてのオプションを事前に選択できるので、ユーザーはそれらをすべて自分で選択する必要はありません。 これまでのところ、それをクリックして手動で1つのオプションを選択するまで、正常に動作します。事前選択のこの時点からは、もはや動作していないようです。しかし、ビジュアルだけはもう機能しません。オプションでは、選択された「選択済み」がそれらに適用されます。また、selectの.val（）は、プレセレクタによって選択されたすべての値を返します。だから、バックグラウンドではすべて正常に動作しますが、ユーザーはそれが働いているのを見ることはできません。ここで

は私の選択です：

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

私はこの問題を解決するために何ができるかのアイデアのうち、現在のよ：

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

そして、ここでは、セレクタの一つです。

Answer 1

読むと、私は特異性のために引用：私はprop()を使用しているプロパティ

対

属性

属性とプロパティの違い特定の状況で で重要になる可能性があります。 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

ここでは、役立つサンプルコードを示します。 jqueryのdocにこの貫通

$(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>