<html:select>的重置问题

学习做一个jsp页面,其中需要重置按钮,但有些值要保留。

因此,用js做了一个清空处理。其中<html:select>的清空找了很久才找到。

function onClear() {
    var inputElements = document.getElementsByTagName("input");
    var selectElements = document.getElementsByTagName("select");
    for (i = 0; i < inputElements.length; i++) {
        if (inputElements[i] == null) {
            continue;
        }
        if (inputElements[i].type == "text") {
            inputElements[i].value = "";
        }
    }
    for (i = 0; i < selectElements.length; i++) {
        if (selectElements[i] == null) {
            continue;
        }
        if (selectElements[i] != null) {
            selectElements[i].selectedIndex = 0;
        }
    }
}


<!DOCTYPE html><br/><html lang="zh"><br/><head><br/> <meta charset="UTF-8" /><br/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><br/> <title>征婚网注册</title><br/> <style><br/> body {<br/> font-family: "Microsoft YaHei", sans-serif;<br/> background-color: #f5f5f5;<br/> display: flex;<br/> justify-content: center;<br/> align-items: center;<br/> height: 100vh;<br/> margin: 0;<br/> }<br/> .form-container {<br/> width: 400px;<br/> padding: 30px;<br/> background: white;<br/> border-radius: 10px;<br/> box-shadow: 0 4px 10px rgba(0,0,0,0.1);<br/> }<br/> h2 {<br/> text-align: center;<br/> color: #d63384;<br/> }<br/> .input-group {<br/> margin-bottom: 15px;<br/> }<br/> label {<br/> display: block;<br/> margin-bottom: 5px;<br/> font-weight: bold;<br/> }<br/> input[type="text"], input[type="tel"], select {<br/> width: 100%;<br/> padding: 8px;<br/> border: 1px solid #ccc;<br/> border-radius: 5px;<br/> }<br/> .checkbox-group {<br/> display: flex;<br/> flex-wrap: wrap;<br/> gap: 10px;<br/> }<br/> .checkbox-item {<br/> display: flex;<br/> align-items: center;<br/> }<br/> .checkbox-item input {<br/> margin-right: 5px;<br/> }<br/> .btn-group {<br/> display: flex;<br/> justify-content: space-between;<br/> margin-top: 20px;<br/> }<br/> button {<br/> padding: 10px 20px;<br/> border: none;<br/> border-radius: 5px;<br/> cursor: pointer;<br/> }<br/> .reset-btn {<br/> background: #6c757d;<br/> color: white;<br/> }<br/> .login-btn {<br/> background: #d63384;<br/> color: white;<br/> }<br/> </style><br/></head><br/><body><br/><div class="form-container"><br/> <h2>征婚网</h2><br/> <div class="input-group"><br/> <label>性别:</label><br/> <div><br/> <input type="radio" id="male" name="gender" value="男" checked /><br/> <label for="male">男</label><br/> <input type="radio" id="female" name="gender" value="女" /><br/> <label for="female">女</label><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>出生年月:</label><br/> <select style="width: 32%; display: inline-block;"><br/> <option>请选择年</option><br/> <!-- 年份循环 --><br/> <script><br/> const year = new Date().getFullYear();<br/> for (let i = year; i >= 1950; i--) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> <select style="width: 30%; display: inline-block;"><br/> <option>请选择月</option><br/> <script><br/> for (let i = 1; i <= 12; i++) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> <select style="width: 30%; display: inline-block;"><br/> <option>请选择日</option><br/> <script><br/> for (let i = 1; i <= 31; i++) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> </div><br/> <div class="input-group"><br/> <label>所在地区:</label><br/> <input type="text" value="奋斗者之家" readonly /><br/> </div><br/> <div class="input-group"><br/> <label>婚姻状况:</label><br/> <div><br/> <input type="radio" id="single" name="status" value="单身" checked /><br/> <label for="single">单身</label><br/> <input type="radio" id="unmarried" name="status" value="未婚" /><br/> <label for="unmarried">未婚</label><br/> <input type="radio" id="divorced" name="status" value="离异" /><br/> <label for="divorced">离异</label><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>学历:</label><br/> <input type="text" value="小学" readonly /><br/> </div><br/> <div class="input-group"><br/> <label>月薪:</label><br/> <input type="text" value="1000~100000" readonly /><br/> </div><br/> <div class="input-group"><br/> <label>手机号:</label><br/> <input type="tel" placeholder="请输入手机号" /><br/> </div><br/> <div class="input-group"><br/> <label>昵称:</label><br/> <input type="text" placeholder="请输入昵称" /><br/> </div><br/> <div class="input-group"><br/> <label>喜欢的类型:</label><br/> <div class="checkbox-group"><br/> <div class="checkbox-item"><input type="checkbox" /> <label>爱打篮球</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>温柔</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>可爱</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>小鲜肉</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>御姐</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>萝莉</label></div><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>自我介绍:</label><br/> <textarea rows="3" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:5px;" placeholder="请填写自我介绍"></textarea><br/> </div><br/> <div class="input-group"><br/> <div><input type="checkbox" checked /> 我承诺年满18岁、单身</div><br/> <div><input type="checkbox" checked /> 抱着严肃的态度</div><br/> <div><input type="checkbox" checked /> 真诚寻找另一半</div><br/> <div><input type="checkbox" /> 我同意注册条款和会员加入标准</div><br/> </div><br/> <div class="btn-group"><br/> <button class="reset-btn">RESET</button><br/> <button class="login-btn">登录</button><br/> </div><br/></div><br/></body><br/></html>
10-30
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%-- Created by IntelliJ IDEA. User: Administrator Date: 2025/2/28 Time: 15:47 To change this template use File | Settings | File Templates. --%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>学生列表</title> </head> <body> <h2 style="text-align: center">欢迎您,${name}</h2> <form action="<%=request.getContextPath()%>/student/selectStudentAndGrade" method="post"> 学生姓名:<input type="text" name="studentName" placeholder="请输入要搜索的学生姓名" value="${student.studentName}"> 班级:<select name="gradeId"> <option value=>请输入班级</option> <option value="1"<c:if test="${student.gradeId=='1'}">selected</c:if>>java1班</option> <option value="2"<c:if test="${student.gradeId=='2'}">selected</c:if>>java2班</option> <option value="3"<c:if test="${student.gradeId=='3'}">selected</c:if>>java3班</option> <option value="4"<c:if test="${student.gradeId=='4'}">selected</c:if>>java4班</option> </select> <input type="submit" value="查询"> <input type="button" value="重置" onclick="resetQuery()"> </form> </form> <input type="button" value="新增" onclick="location.href='<%=request.getContextPath()%>/studentAdd.jsp'"> <table> <tr> <td>序号</td> <td>学生姓名</td> <td>年龄</td> <td>出生日期</td> <td>班级</td> </tr> <c:forEach items="${studentList}" var="tea" varStatus="sta"> <tr> <td>${sta.count}</td> <td>${tea.studentName}</td> <td>${tea.age}</td> <%-- <td>${stu.birth}</td>--%> <td><fmt:formatDate value="${tea.birth}" pattern="yyyy-MM-dd"/></td> <td>${tea.grade.gradeName}</td> <%-- <td>${stu.grade.gradeName}</td>--%> <td><a href="<%=request.getContextPath()%>/student/getStudentInfo/${tea.id}">修改</a> <a href="<%=request.getContextPath()%>/student/deleteStudent/${tea.id}" onclick="if (confirm('确认是否删除')==false) {return false;}">删除</a></td> </tr> </c:forEach> </table> </body> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script> <script> function resetQuery(){ $("input[type=text]").val(""); $('select').prop('selectedIndex',0); } </script> </html>加css样式
06-13
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丈八涯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值