Ändern eines href-Werts durch Combobox select

-1

Ich habe ein Kombinationsfeld auf einer JSP-Seite. Und ich habe ein paar Anker-Tags mit href. Ich möchte den href ändern, indem ich den href-Wert basierend auf dem ausgewählten Wert des Kombinationsfelds aktualisiere. Wie geht man damit um?Ändern eines href-Werts durch Combobox select

Jsp Seite ist unten mit sortselect combobox und hres von prevLink, nextLink, numLink müssen geändert werden.

<%@ 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>

Quelle

2016-06-30 Sai Viswanath VKS Palaparthi

die Werte von <option> Tag Betrachtet sein Links, werde ich mit folgendem Ansatz gehen:

Ein id Attribut für Ihre <a>-Tags, so dass sie über JavaScript ausgewählt werden können.

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

Für Testzwecke hinzugefügt i document.getElementById('link-id').innerHTML = this.value; zu onchange Methode auch, aber Sie brauchen es nicht.

Wenn Sie href mehrere <a> Tags mit/ohne Bezug auf den Wert in <select> Tag ausgewählt ändern, machen Sie eine JavaScript Funktion und in onchange Methode, ruft, dass JavaScript Funktion durch den in <select> Tag ausgewählten Wert übergeben.

Quelle

2016-07-01 10:20:19 rupinderjeet

Ändern eines href-Werts durch Combobox select

Antwort

Verwandte Themen