当通过javascript/jquery更改值时，多个选择不会更新

我有一个多选，其中每个选项都有一个类设置。根据班级的不同，我可以预先选择具有特定班级的所有选项，因此用户不必自己选择所有选项。到目前为止，它工作正常，直到我点击它手动选择一个选项。从这一点来看，预先选择似乎不再适用。但只有视觉效果不再起作用，选项仍然会将“选择=”选中“”应用于它们。此外，select上的.val（）返回由预选器选择的所有值。所以在后台一切正常，但用户不能看到它的工作。当通过javascript/jquery更改值时，多个选择不会更新

这是我的选择：

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

我目前的想法我能做些什么来解决这个问题。

来源

2017-08-10 germanTHX

尝试'prop'，而不是'attr'。 –

通过这个阅读的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);

来源

2017-08-10 10:54:00 kukkuz

感谢它与道具。我知道这会很简单。那么我不会再犯这个错误。 – germanTHX

这里是一个示例工作代码来帮助你。我已经使用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>

来源

2017-08-10 10:52:42

当通过javascript/jquery更改值时，多个选择不会更新

回答

相关问题