2016-06-30 39 views
-1

我在jsp頁面上有一個組合框。我有幾個錨點標籤與href。我想通過基於組合框選定值更新href值來修改href。如何解決這個問題?通過組合框更改href值選擇

Jsp Page下面是sortselect combobox和prevLink,nextLink,numLink必須修改。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="pragma" content="no-cache" /> 
<title>Home</title> 
</head> 
<body> 
    <div id="header"> 
     <%@ include file="headerinclude.jsp"%> 
     <table> 
      <tr> 
       <td><a href="<c:url value="./newStudentPage.do"/>">New 
         Student</a></td> 
       <td><a href="<c:url value="./updateInputForm.do"/>">Update 
         Student</a></td> 
       <td><a href="<c:url value="./deleteInputForm.do"/>">Delete 
         Student</a></td> 
      </tr> 
     </table> 
    </div> 
    <h3> 
     <c:out value="List of active Students" /> 
    </h3> 
    <div id="body"> 
     <label for="sortselect">SortBy</label> <select name="sortselect"> 
      <option value="firstname" selected>FirstName</option> 
      <option value="lastname">LastName</option> 
      <option value="gender">Gender</option> 
      <option value="dob">DOB</option> 
     </select> 

     <table id="student-table" border="1" cellpadding="1" cellspacing="1"> 
      <th>FirstName</th> 
      <th>LastName</th> 
      <th>Gender</th> 
      <th>DOB</th> 
      <th>Email</th> 
      <th>MobilNumber</th> 
      <th>Address</th> 
      <th>Courses</th> 
      <c:forEach var="student" items="${studentList}"> 
       <tr> 
        <td>${student.firstName}</td> 
        <td>${student.lastName}</td> 
        <td>${student.gender}</td> 
        <td>${student.DOB}</td> 
        <td>${student.email}</td> 
        <td>${student.mobileNumber}</td> 
        <td>${student.address}</td> 
        <td><c:forEach var="course" items="${student.courses}"> 
        ${course}&nbsp; 
       </c:forEach></td> 
       </tr> 
      </c:forEach> 
     </table> 

     <%--For displaying Previous link except for the 1st page --%> 
     <c:if test="${currentPage != 0}"> 
      <td><a id="prevLink" 
       href="./getHomePage.do?first=${currentPage - maxPageRecords}&max=${maxPageRecords}&sortBy=firstname&sortDirection=asc">Previous</a></td> 
     </c:if> 

     <%--For displaying Page numbers. 
    The when condition does not display a link for the current page--%> 
     <table id="page-table" border="1" cellpadding="5" cellspacing="5"> 
      <tr> 
       <c:forEach begin="1" end="${noOfPages}" var="i"> 
        <c:choose> 
         <c:when test="${currentPage eq ((i-1) * maxPageRecords)}"> 
          <td>${i}</td> 
         </c:when> 
         <c:otherwise> 
          <td><a id="numLink" 
           href="./getHomePage.do?first=${(i-1) * maxPageRecords}&max=${maxPageRecords}&sortBy=firstname&sortDirection=asc">${i}</a></td> 
         </c:otherwise> 
        </c:choose> 
       </c:forEach> 
      </tr> 
     </table> 

     <%--For displaying Next link --%> 
     <c:if test="${currentPage lt ((noOfPages - 1) * maxPageRecords)}"> 
      <td><a id="nextLink" 
       href="./getHomePage.do?first=${currentPage + maxPageRecords}&max=${maxPageRecords}&sortBy=firstname&sortDirection=asc">Next</a></td> 
     </c:if> 

    </div> 
    <div id="footer"> 
     <%@ include file="footerinclude.jsp"%> 
    </div> 
</body> 
</html> 

回答

0

考慮<option>變量的值是Links,我會去用以下方法:

<a>標籤創建id屬性,以便他們可以通過JavaScript選擇。

<a id="link-id" href="#previous-address"> This link's href will change </a> 

<select onchange=" 
     document.getElementById('link-id').setAttribute('href', this.value); 
     document.getElementById('link-id').innerHTML = this.value;" > 
    <option value="#previous-address">Select</option> 
    <option value="www.google.com">google</option> 
    <option value="www.facebook.com">facebook</option> 
    <option value="www.stackoverflow.com">stackoverflow</option> 
</select> 

出於測試目的,我加入document.getElementById('link-id').innerHTML = this.value;onchange方法太多,但你並不需要它。

如果需要更改多個的href<a>標籤有/無關於在<select>標籤中選擇的值,使JavaScript功能和onchange方法,調用JavaScript功能通過傳遞<select>標籤選擇的值。

相關問題