JSTL - <form:select> 的用法

本文详细介绍了表单中下拉框组件的使用方法及其构成要素,包括单选和多选下拉框的实现原理,并解释了如何通过属性设置来生成对应的下拉选项。

转载自: http://www.web-tag.net/3c98ca7b0cac8312.htm

下拉框组件标签  
    下拉框标签的典型形式为:
    <form: select path="city" items="${cityList}"/>,它包括两方面的数据:

    1)对应表单对象属性值(city);
    2)用于构造整个下拉框选项的数据(cityList)。

    严格地说,下拉框组件分为单选和多选两种形式,当表单对象对应属性为复数形态的类型时(如String[]、List、Set),产生的目标组件为多选下拉框,反之为单选下拉框.

   

把下面的source,改写成thymeleaf形式文件。 <%@ page contentType="text/html; charset=UTF-8"%> <%@ page pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%> <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <!DOCTYPE html> <html> <head> <!-- IEバージョン設定 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11"> <title> 会社マスタ一覧画面</title> <!-- jQuery設定 --> <script src="<c:url value="/resources/js/jquery-1.11.3.min.js" />"></script> <!-- CSS設定 --> <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/tsocms.css" />"> <script> $(function() { $(".stockCompanyMasterListTable tr:odd").addClass("odd"); $(".stockCompanyMasterListTable tr:even").addClass("even"); }); </script> <script> <!-- function stockCompanyclearButton() { document.select.mechSubCode.value = ""; document.select.stockCompanyName.value =""; } function updateSubmitCheck() { if(!radioCheck("更新対象をラジオボタンで選択してください。")) return; stockCompanyMasterListUpdateButton(); } function deleteSubmitCheck() { if(!radioCheck("削除対象をラジオボタンで選択してください。")) return; stockCompanyMasterListDeleteButton(); } function stockCompanySearchButton() { var target = document.getElementById("stockCompanyMasterListForm"); target.action = "${pageContext.request.contextPath}/stockcompanymasterlist/select"; target.submit(); } function stockCompanyMasterListDeleteButton() { var target = document.getElementById("stockCompanyMasterListForm"); target.action = "${pageContext.request.contextPath}/stockcompanymasterdelete"; target.submit(); } function stockCompanyMasterListUpdateButton() { var target = document.getElementById("stockCompanyMasterListForm"); target.action = "${pageContext.request.contextPath}/stockcompanymasterupdate"; target.submit(); } function radioCheck(msg) { var flag = false; var elm = document.getElementsByName('selectedKey'); for (i = 0; i < elm.length; i++) { if (elm[i].checked) { flag = true; } } if (!flag) { alert(msg); return false; } return true; } //--> </script> </head> <body> <!-- <!-- ページ見出し --> <div> <h1> 会社マスタ一覧画面</h1> </div> <form:form name="select" modelAttribute="stockCompanyMasterListForm" method="post" action="${pageContext.request.contextPath}/stockcompanymasterlist/select"> <!-- 会社結果一覧表 --> <div class="stockCompanyMasterListTableAll"> <div class="keyleft"> <!-- 検索キー --> <!-- 機構加入者コード --> <div class="searchkey"> <span class="mechSubCodeKey">機構加入者コード</span> <form:input type="search" path="mechSubCode" size="45" /> </div> <!-- 会社名 --> <div class="searchkey"> <span class="stockCompanyNameKey">会社名</span> <form:input type="search" path="stockCompanyName" size="45" /> </div> <!-- Hidden検索キー --> <form:hidden path="mechSubCodeHidden" /> <form:hidden path="stockCompanyNameHidden" /> </div> <div class="keyright"> <!-- 検索ボタン --> <form:button type="submit" name="stockCompanySearchbutton" id="stockCompanySearchbutton" onclick="stockCompanySearchButton()">検索</form:button> <!-- 初期化ボタン --> <form:button type="button" name="stockCompanyclearbutton" id="stockCompanyclearbutton" onclick="stockCompanyclearButton()">初期化</form:button> </div> <div class="stockCompanyMasterListTable"> <table class="stockCompanyMasterListTable"> <thead class="stockCompanyMasterList"> <tr> <th class="radioButton"></th> <th class="mechSubCode">機構加入者コード</th> <th class="stockCompanyName">会社名</th> <th class="stockCompanyNameKana">会社名カナ</th> <th class="effectiveDate">適用開始日</th> <th class="expireDate">適用終了日</th> </tr> </thead> <tbody class="searchListBody"> <c:forEach var="detail" items="${stockCompanyMasterListForm.stockCompanyMasterListDetailFormList}" varStatus="status"> <tr> <td class="radioButton"> <form:radiobutton path="selectedKey" value="${detail.mechanismSubscriberCd},${detail.effectiveDate}" /><br> </td> <td class="mechSubCode"> <c:out value="${detail.mechanismSubscriberCd}"></c:out> </td> <td class="stockCompanyName"> <c:out value="${detail.stockcompany}"></c:out> </td> <td class="stockCompanyNameKana"> <c:out value="${detail.stockcompanyKana}"></c:out> </td> <td class="effectiveDate"> <c:out value="${detail.effectiveDate}"></c:out> </td> <td class="expireDate"> <c:out value="${detail.expireDate}"></c:out> </td> </tr> </c:forEach> </tbody> </table> </div> <div class="left"></div> <div class="right"> <!-- 新規登録ボタン --> <form:button type="button" name="stockCompanyMasterListRegisterbutton" id="stockCompanyMasterListRegisterbutton" onclick="location.href='${pageContext.request.contextPath}/stockcompanymasterregister'">新規登録</form:button> <!-- 更新ボタン --> <form:button type="button" name="stockCompanyMasterListUpdatebutton" id="stockCompanyMasterListUpdatebutton" onclick="updateSubmitCheck()">更新</form:button> <!-- 削除ボタン --> <form:button type="button" name="stockCompanyMasterListDeletebutton" id="stockCompanyMasterListDeletebutton" onclick="deleteSubmitCheck()">削除</form:button> <!-- 戻るボタン --> <form:button type="button" name="stockCompanyMasterListReturnbutton" id="stockCompanyMasterListReturnbutton" onclick="location.href='${pageContext.request.contextPath}/master'">戻る</form:button> </div> </div> </form:form> </body> </html>
07-18
<%@ 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值