通过javascript / jquery

Question

我有一个多选项，每个选项都有一个类设置。  根据类别，我可以预先选择具有特定类别的所有选项，因此用户不必自己选择所有选项。 到目前为止它工作正常，直到我通过点击它手动选择一个选项。从这一点上预选似乎不再起作用了。但是只有视觉效果不再起作用，选项仍然会将“selected =”选中“'应用于它们。 select上的.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);

我目前没有想法我可以做些什么来解决这个问题。

Answer 1

以下是一个帮助您的示例工作代码。我使用过prop()：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在jquery doc中阅读此内容，我引用了特异性：

  

属性与属性

     

属性和属性之间的区别非常重要   具体情况。在jQuery 1.6之前，有时会使用.attr（）方法   在检索某些属性时考虑了属性值，   这可能会导致行为不一致。从jQuery 1.6开始，.prop（）   方法提供了一种显式检索属性值的方法   .attr（）检索属性。

Jquery，或者更确切地说是它的更高版本，清楚地区分了属性和属性。因此，简单的规则是，如果要设置属性（与表单元素等用户操作相关的内容），请使用#prop()，否则使用#attr()。< / p>

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

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