问题：

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

金子平

2023-03-14

因此，我一直在使用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>

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

谭梓

2023-03-14

我不能肯定是什么导致了这个问题，但我从图片中推断出下拉列表是导航栏的一部分。如果这个导航栏要显示在每个页面上，为什么不制作一个单独的jsp文件，其中只包含导航栏的代码。它也很容易管理。

navigation.jsp

<!-- code for nav bar -->

现在，您所需要做的就是将jsp页面包含在您想要的页面中，这样您就可以很好地使用了。管理CSS和其他语言也将变得容易。

包括如下页面：

我希望这有帮助。

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

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档