Question

我在jsp页面上有一个组合框。我有很少的href锚标签。我想通过根据组合框选择值更新href值来修改href。如何处理？

Jsp Page下面是sortselect组合框，必须修改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>

Answer 1

考虑<option>标记的值为Links，我将采用以下方法：

为id代码创建<a>属性，以便通过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函数并在{{1 }}方法，通过传递JavaScript标记中选择的值来调用<select>函数。

通过组合框选择更改href值

1 个答案: