Question

因此，我一直在使用Spring MVC和JSP来开发Web应用程序，但是我遇到了一个有关下拉列表的问题，该下拉列表应该显示在所有jsp页面中，但是一旦单击了其中的一个选项，下拉列表，在其他页面中将变为空白。

这是代码：

-我的header.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>&nbsp;&nbsp; Items &nbsp;</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 -->

-我的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>

-我的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>

这是它的屏幕截图：

你们对这个问题有什么看法？

Answer 1

我不能确定是什么导致了这里的问题，但是我从图像中推断出的是下拉菜单是导航栏的一部分。如果要在每个页面上显示此导航栏，那么为什么不制作一个单独的jsp文件，其中仅包含导航栏的代码。这也将易于管理。

navigation.jsp

<!-- code for nav bar -->

现在，您需要做的就是将jsp页面包含在所需的页面中，您会很方便。管理CSS和其他语言也将变得容易。

包括这样的页面：<%@ include file="navigation.jsp" %>

我希望这会有所帮助。

使用Spring MVC的JSP中的下拉列表问题

1 个答案: