我在jsp文件中使用Bootstrap2.3.2和Select2 3.4.2。我想通过Select2库覆盖Bootstrap选择样式。它在第一次加载jsp文件时有效,但在将选择提交给servlet并从servlet转发回同一个jsp之后,我发现select对象的函数select2()已经丢失,并且选择框变为Bootstrap样式。看起来像select2.js没有效果,为什么?请帮忙。
以下是我的代码段
selectCategory.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()">
的servlet:
String url = "/standard/selectCategory.jsp";
RequestDispatcher successView = req.getRequestDispatcher(url);
successView.forward(req, res);
我的问题是为什么$('#selectCat')。select2()在从servlet转发请求时丢失了?
看起来根本原因是来自include jQuery库两次
因为我包含另一个jsp来呈现查询结果,并且这个jsp需要使用tablesorter, 所以我在这里只包含jQuery和tablesorter库。我认为第二个包含jQuery库对之前包含的select2库有一些影响,所以select2()丢失了。删除重复包含的库后,结果很好。
但我做了一个实验,结果似乎不是我所期待的
file1.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>
file2.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应该生效,但它不会