Итак, я работал над веб-приложением, использующим Spring MVC и JSP, и столкнулся с проблемой, связанной с раскрывающимся списком, который должен отображаться на всех страницах jsp, но как только я нажимаю на одну из опций враскрывающийся список, он становится пустым на других страницах.
Вот код:
-Мой заголовок.tag:
<%@ taglib uri="...java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="...www.springframework.org/tags/form" %>
<%@ taglib prefix="dropdown" uri="...www.springframework.org/tags/form" %>
<%@ taglib prefix="nav" uri="...www.springframework.org/tags/form" %>
<%@ taglib prefix="dropdown-menu" uri="...www.springframework.org/tags/form" %>
<%@ taglib prefix="items" uri="...www.springframework.org/tags/form" %>
<% String ctxPath = request.getContextPath(); %>
<%@attribute name="headerData" required="false"
type="com.project.project.web.dto.HeaderDTOBuilder.HeaderDTO" %>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">OnTheGo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown" >
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Categories <span class="caret"></span></a>
<ul class="dropdown-menu" >
<c:forEach items="${headerData.categories}" var="category" >
<li><a href="/products/list${category.name}">${category.name}</a></li>
<!--li><a href="/products/list${category.name}">${category.name}</a></li-->
<option value="${role}" ${role == SelectRole?'selected="selected"':''}>${role}</option>
</c:forEach>
</ul>
</li>
<c:choose>
<c:when test="${sessionScope.auth == null}">
<li>
<a href="/register">Register</a>
</li>
<li>
<a href="/login">Login</a>
</li>
</c:when>
<c:otherwise>
<li>
<a href="/logout">Logout</a>
</li>
</c:otherwise>
</c:choose>
</ul>
<div class="nav navbar-nav navbar-right">
<table class="navbar-brand">
<tr>
<td rowspan="2"><a class="glyphicon glyphicon-shopping-cart" href="/cart/read"></a></td>
<td> Items </td>
<td>Total</td>
</tr>
<tr>
<td id="count">${headerData.count}</td>
<td id="total">${headerData.totalPrice} c</td>
</tr>
</table>
</div>
</div>
<!-- /.navbar-collapse -->
<c:set var="Products" value="${headerData.products}" scope="application"/>
</div>
<!-- /.container -->
-My index.jsp
<%@ taglib uri="...java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title>OnTheGo Website</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="...oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="...oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<tag:header headerData="${headerDTO}"/>
<!-- Page Content -->
<div class="container">
<div class="jumbotron">
<h1>Welcome to our shop</h1>
<p>Welcome to our new online shop! Thanks for coming along to check out our new website.
We hope that you'll be able to find all the things here that you like so much in the shop,
but now be able to order them when getting to us is proving a bit of a challenge.
</p>
</div>
<hr>
<tag:footer/>
</div>
<!-- /.container -->
< !-- jQuery -->
<script src="...ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="...maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
-My 1.jsp (тот, который отображается после выбора первого варианта в раскрывающемся списке):
<%@ taglib uri="...java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title>OTG Products List</title>
<link rel="stylesheet" ...maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="...oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="...oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<tag:header headerData="${headerDTO}"/>
<div class="container header-spacer">
<div class="page-header">
<h3>Equipement
<small>Products</small>
</h3>
</div>
<link href="/css/productstyle.css" rel="stylesheet">
<div class="row">
<div class="column">
<link href="/css/ColumnStyle.css" rel="stylesheet">
<div class="wrapper">
<div class="product-img">
<img src="...bit.ly/2tMBBTd" height="420" width="327">
</div>
<div class="product-info">
<div class="product-text">
<h1>Harvest Vase</h1>
<h2>by studio and friends</h2>
<p>Harvest Vases are a reinterpretation<br> of peeled fruits and vegetables as<br> functional objects. The surfaces<br> appear to be sliced and pulled aside,<br> allowing room for growth. </p>
</div>
<div class="product-price-btn">
<p><span>78</span>$</p>
<button type="button">buy now</button>
</div>
</div>
</div>
</div>
<div class="column">
<div class="wrapper">
<div class="product-img">
<img src="...bit.ly/2tMBBTd" height="420" width="327">
</div>
<div class="product-info">
<div class="product-text">
<h1>Vase</h1>
<h2>by studio and friends</h2>
<p>Harvest Vases are a reinterpretation<br> of peeled fruits and vegetables
as<br> functional objects. The surfaces<br> appear to be sliced and pulled aside,<br> allowing room for growth. </p>
</div>
<div class="product-price-btn">
<p><span>78</span>$</p>
<button type="button">buy now</button>
</div>
</div>
</div>
</div>
</div>
<!--div class="card">
<img src="../images/cropped-01.jpg" alt="Denim Jeans" style="width:100%">
<h1>Rock Jeans</h1>
<p class="price">$9.99</p>
<p>Some text about the jeans..</p>
<p><button>Add to Cart</button></p>
</div-->
</div>
<!-- jQuery -->
<script src="...ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="...maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Это скриншот того, как это выглядит: 
Что вы, ребята, об этомпроблема ??