刷新页面删除了bootstrap-select样式 [英] Refreshing page removes bootstrap-select stylings

问题描述

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

I'm working with bootstrap-select and I'm new to front-end. I'm trying to implement bootstrap's multi-select component in my page but the problem I'm facing is that, when I submit my page to server and if error occurs, it removes all the css classes from select box and simply shows a multi-select list instead of the original component. The component I'm using is This and following is my jsp code where I'm trying to use this component.

<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代码块：

Following is my pageOnLoad chunk of code:

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

任何帮助将不胜感激。谢谢

Any help would be appreciated. Thanks

推荐答案

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

I think on refresh, the css classes are removed from the component hence making it a simple multi-select list. Try adding an id to select component e.g. id="select-picker" and then force render with the reference of this id like following:

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

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

Or if you are submitting the form then make sure you call this render function inside of submit function too to ensure re-rendering of the component properly.

这篇关于刷新页面删除了bootstrap-select样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！