JSP多次连续选择

时间:2015-03-18 21:52:51

标签: java jsp jstl

我正在学习JSP,我想创建简单的在线商店

  1. 客户将选择一个品牌

    • 方法connector.getBrands()将从数据库中返回可用品牌列表

    • 现在,客户将在另一个选择中看到可用的选项

    • 现在我需要在变量

    • 中保留所选品牌
  2. 客户将选择型号

    • 方法connector.getModel($ {brand})将返回可用模型列表

    • 现在客户可以选择型号

    • 现在我需要持有所选品牌和型号

  3. 客户将选择颜色

    • 方法connector.getColor($ {brand},$ {model}将返回可用颜色列表

    • 现在我需要保留所有三个值

  4. 客户将点击"继续"按钮继续到另一个JSP页面进行订单确认

  5. 现在,问题在于每当我点击提交"品牌"或" model",其他选中的字段将重置(我尝试从&#34内部设置一个全局变量;选择"元素但没有任何运气)。

    我如何修改此代码,以便在选择一个品牌之后展示适当的品牌,该品牌的型号以及之后的可用颜色? (并将所有这些值提交到下一页)

    如果知道如何从&#34中选择一个值,那将是很好的选择"或"输入"没有重新加载页面的字段

    这是我的MotorbikeForm.jsp代码

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <jsp:useBean id="connector" class="dealership.DatabaseConnector" scope="page"/>
    <c:out value="${connector.initializeDatabase()}" />
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    
    <form method="post">
    <label>
    Brand<br/>
    <select name="brand" size="1">
    <c:forEach var="element" items="${connector.getBrands()}">
    <option><c:out value="${element}" /></option>
    </c:forEach>
    </select>
    </label><br/>
    <input type="submit" value="Submit"/>
    <!-- This line below is useless right now -->
    <c:set var="brandVar" value="${brand}"/>
    </form>
    
    <form method="post">
    <label>
    Model<br/>
    <select name="model" size="1">
    <c:forEach var="element" items="${connector.getModels(param.brand)}">
    <option><c:out value="${element}" /></option>
    </c:forEach>
    </select>
    </label><br/>
    <input type="submit" value="Submit"/><br/>
    </form>
    
    <form method="post">
    <label>
    Color<br/>
    <select name="color" size="1">
    <c:forEach var="element" items="${connector.getColors(param.brand, param.model)}">
    <option><c:out value="${element}"/></option>
    </c:forEach>
    </select>
    </label><br/>
    <input type="submit" value="Submit"/><br/>
    </form><br/><br/>
    
    Next step<br/>
    <form method="post" action="OrderConfirmation.jsp">
    <input type="submit" value="Continue"/>
    </form>
    
    </body>
    </html>
    

    1

    enter image description here

    2

    enter image description here

    3

    enter image description here

1 个答案:

答案 0 :(得分:1)

首先,每次页面重新加载时,您都不应该访问数据库以获取品牌模型。您应该获取一次值,然后将它们保存在session中以便重复使用。

<c:if test="${empty brands}">
  <c:set var="brands" value="${connector.getBrands()}" scope="session" />
</c:if>

其次,您需要确保在后续页面重新加载时重新选择brand

<select name="brand" size="1">
  <c:forEach var="brand" items="${brands}">
    <option <c:out value="${brand == param.brand ? 'selected' : ''}" />>
      <c:out value="${brand}" />
    </option>
  </c:forEach>
</select>

现在,对model执行相同的操作,但也将其包装在<c:if>中,我们避免在第一页加载时访问数据库(因为尚未选择brand)并且也可以选择隐藏空白下拉列表。

<c:if test="${not empty param.brand}">
  <c:if test="${empty param.model}">
    <c:set var="models" value="${connector.getModels(param.brand)}" scope="session" />
  </c:if>
  <form method="post">
    <label>Model<br/>
    <select name="model" size="1">
      <c:forEach var="model" items="${models}">
        <option <c:out value="${model == param.model ? 'selected' : ''}" />>
          <c:out value="${model}" />
        </option>
      </c:forEach>
    </select>
    </label><br/>
    <input type="hidden" name="brand" value="${param.brand}"/><br/>
    <input type="submit" value="Submit"/><br/>
  </form>
</c:if>

同样重复color的逻辑。

<c:if test="${not empty param.model}">
  <c:if test="${empty param.color}">
    <c:set var="colors" value="${connector.getColors(param.brand, param.model)}"
           scope="session" />
  </c:if>
  <form method="post" action="OrderConfirmation.jsp">
    <label>Color<br/>
    <select name="color" size="1">
      <c:forEach var="color" items="${colors}">
        <option><c:out value="${color}"/></option>
      </c:forEach>
    </select>
    </label><br/>
    <input type="hidden" name="brand" value="${param.brand}"/><br/>
    <input type="hidden" name="model" value="${param.model}"/><br/>
    <br/>
    <br/>
    Next step<br/>
    <input type="submit" value="Continue"/>
  </form>
</c:if>

请注意,您的上一个<form>是不必要的。您的colors表单已包含下订单所需的所有信息(brandmodelcolor)。因此,我直接将其action设置为 OrderConfirmation.jsp