當通過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更改值時，多個選擇不會更新

回答

相關問題