1

我在 jsp 文件中使用Bootstrap2.3.2和Select2 3.4.2 。我想通过 Select2 库覆盖 Bootstrap 选择样式。第一次加载jsp文件时可以，但是在提交选择到servlet并从servlet转发回同一个jsp后，发现选择对象的select2()函数丢失了，选择框变成了Bootstrap样式. 看起来 select2.js 没有效果，这是为什么呢？请帮忙。

以下是我的代码片段

选择类别.jsp：

            <script src="<%=request.getContextPath()%>/util/jquery/jquery-1.9.1.js"> </script>
            <!-- Bootstrap -->
            <% 
            //Cannot include bootstrap.css twice
            Boolean hasBootstrap = (Boolean)request.getAttribute("hasBootstrap");
            if (hasBootstrap == null) {
            %>
                <link rel="stylesheet" href=" <%=request.getContextPath()%>/util/bootstrap2.3.2/css/bootstrap.css" />
                <link rel="stylesheet" href=" <%=request.getContextPath()%>/util/bootstrap2.3.2/css/bootstrap-select.css" />
                <style type="text/css">
                    body {
                        padding-top: 60px;
                        padding-bottom: 40px;
                    }
                </style>
                <link rel="stylesheet" href="<%=request.getContextPath()%>/util/bootstrap2.3.2/css/bootstrap-responsive.css" />
                <script src="<%=request.getContextPath()%>/util/bootstrap2.3.2/js/bootstrap-select.js"> </script>
                <script src=" <%=request.getContextPath()%>/util/bootstrap2.3.2/js/bootstrap.js"> </script>
        <%
                hasBootstrap = true;
                request.setAttribute("hasBootstrap", hasBootstrap);
            } //end of if
        %>

        <link rel="stylesheet" href="<%=request.getContextPath()%>/util/jquery/select2-3.4.2/select2.css" />
        <script src="<%=request.getContextPath()%>/util/jquery/select2-3.4.2/select2.js"> </script>

    <script>
    $(function () {
        //$('.selectpicker').selectpicker();
        var sel = $('.selectpicker');
        var sel2 = $('#selectCat');
        $('#selectCat').select2();
    });
    </script>

<body>
    ...


        <select class="selectpicker" id="selectCat" name="selectCat" onchange="getSubject()">

小服务程序：

String url = "/standard/selectCategory.jsp";
RequestDispatcher successView = req.getRequestDispatcher(url);
successView.forward(req, res);

我的问题是为什么从 servlet 转发请求时 $('#selectCat').select2() 丢失了？

更新：

看起来根本原因是两次包含 jQuery 库

因为我包含了另一个jsp来渲染查询结果，而这个jsp需要使用tablesorter，所以我这里只包含jQuery和tablesorter库。我认为第二个包含的 jQuery 库对之前包含的 select2 库有一些影响，因此 select2() 丢失了。删除重复的包含库后，结果很好。

但是我做了一个实验，结果似乎不是我所期望的

文件 1.jsp：

<link rel="stylesheet" href="<%=request.getContextPath()%>/util/jquery/tablesorter/style.css" />
<script src="<%=request.getContextPath()%>/util/jquery/jquery-1.9.1.js"> </script>
<script src="<%=request.getContextPath()%>/util/jquery/tablesorter/jquery.tablesorter.js"> </script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/util/jquery/select2-3.4.2/select2.css" />
<script src="<%=request.getContextPath()%>/util/jquery/select2-3.4.2/select2.js"> </script>

...

            <div class="secondary">
                <%if (request.getAttribute("listStandard") != null) {%>
                    <jsp:include page="file2.jsp"/>
                <%} %>
            </div>

文件2.jsp

<link rel="stylesheet" href="<%=request.getContextPath()%>/util/jquery/tablesorter/style.css" />
<script src="<%=request.getContextPath()%>/util/jquery/jquery-1.9.1.js"> </script>
<script src="<%=request.getContextPath()%>/util/jquery/tablesorter/jquery.tablesorter.js"> </script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/util/jquery/select2-3.4.2/select2.css" />
<script src="<%=request.getContextPath()%>/util/jquery/select2-3.4.2/select2.js"> </script>

我认为 file2.jsp 中包含的第二个 select2.js 应该生效，但它没有

4

0 回答 0