通过 javascript/jquery 更改值时多选不更新答案

【问题标题】：Multiple select not updating when value changed through javascript/jquery通过 javascript/jquery 更改值时多选不更新
【发布时间】：2018-01-18 13:43:47
【问题描述】：

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

我目前不知道我可以做些什么来解决这个问题。

【问题讨论】：

试试prop 而不是attr。

标签： javascript jquery html

【解决方案1】：

在 jquery doc 中通读此内容，我引用具体情况：

属性与属性

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

Jquery，或者更确切地说是它的更高版本，清楚地区分了 attributes 和 properties。所以简单的规则是，如果你想设置一个 property（与用户操作相关的东西，比如表单元素）使用#prop()，否则使用#attr()。

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

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

【讨论】：

感谢它与道具一起使用。我知道这会很简单。好吧，我不会再犯这个错误了。

【解决方案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>

【讨论】：