javascript - 刷新页面删除 bootstrap-select 样式

Question

我正在使用 bootstrap-select，我是前端新手。我正在尝试在我的页面中实现 Bootstrap 的多选组件，但问题是我面临的是，当我将我的页面提交到服务器时，如果发生错误，它会从选择框中删除所有 css 类，并只显示一个多选列表而不是原始组件。我使用的组件是 This以下是我尝试使用此组件的 jsp 代码。

<spring:bind path="userClients">
   <div id="customerSelect" class="${status.error ? 'has-error' : ''}" style="margin-top:20px; margin-bottom:15px height:30px">
       <form:select  class="selectpicker form-control"  path="userClients" multiple="multiple" name="userClients">
            <c:forEach var="clientInfo" items="${clients}">
               <form:option value="${clientInfo.env}">${clientInfo.env}</form:option>
            </c:forEach>
        </form:select>
        <div class="${status.error ? 'has-error' : ''}">
        <form:errors  path="userClients" ></form:errors>
        </div>
   </div>
   </spring:bind>

以下是我的 pageOnLoad 代码块:

 $(document).ready(function() {
     $('select').selectpicker();
 });

如有任何帮助，我们将不胜感激。谢谢

Answer 1

我认为在刷新时，css 类已从组件中删除，因此使其成为一个简单的多选列表。尝试添加一个 id 来选择组件，例如id="select-picker"然后使用此 id 的引用强制渲染，如下所示:

$(document).ready(function() {
    $('#select-picker').selectpicker('render');
} 

或者，如果您正在提交表单，那么请确保您也在提交函数内部调用此呈现函数，以确保正确地重新呈现组件。