通过组合框选择改变href值

在jsp页面上有一个组合框。我有几个锚标签与href。我想通过更新基于组合框所选值的href值来修改href。如何解决这个问题?

Jsp页面下面有排序选择组合框和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>

考虑到<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方法中，但您不需要它。

如果您需要改变多个<a>标签的href与/不相对于<select>标签中选择的值，创建一个JavaScript函数，并在onchange方法中通过传递<select>标签中选择的值来调用该JavaScript函数

相关内容

最新更新

热门标签：