select下拉框在Web开发领域用的非常多。
案例一:比如说修改用户的时候,我们要把当前用户所在的部门回显到用户修改界面。
如图,当前用户所在的部门为财务部,那么跳转到用户修改界面的时候,部门选择这一栏,显示的应该还是财务部。
用户界面:
<body> <form action="selectAction_test.action" method="post"> 请选择您的部门: <select name="depart" id="department"> <option value="1">财务部</option> <option value="2">开发部</option> <option value="3">生产部</option> </select> <input type="submit" value="提交"/> </form> </body>
SelectAction.java:
public class SelectAction extends ActionSupport { private static final long serialVersionUID = 1L; private String depart; public String getDepart() { return depart; } public void setDepart(String depart) { this.depart = depart; } /*跳转方法*/ public String test(){ ActionContext.getContext().put("depart", this.depart); return this.SUCCESS; } }
模拟用户修改页面(通过EL表达式的三目运算符来判断是否选中):
<body> <form action="selectAction_test.action" method="post"> 您所在的部门: <select name="depart" id="department"> <option>--请选择部门--</option> <option value="1" ${depart == '1' ? "selected" : ""}>财务部</option> <option value="2" ${depart == '2' ? "selected" : ""}>开发部</option> <option value="3" ${depart == '3' ? "selected" : ""}>生产部</option> </select> </form> </body>
注:下拉框默认选中效果的属性为selected,不是checked。
结果页面:
案例二:我们从数据库中查询出一些数据(如:部门),然后要传到前台通过select下拉框来显示。
Action中的代码:
public class SelectAction extends ActionSupport { public String testToJsp(){ /*创建一个集合*/ List<Department> departs = new ArrayList<Department>(); departs.add(new Department(1, "国务院")); departs.add(new Department(2, "后勤部")); departs.add(new Department(3, "财政局")); ActionContext.getContext().put("departs", departs); return "toSelecUI"; } }
部门Department.java代码:
public class Department { /*部门id*/ private Integer departId; /*部门名称*/ private String departName; /*无参构造函数*/ public Department() { } /*构造函数*/ public Department(Integer departId, String departName) { this.departId = departId; this.departName = departName; } public Integer getDepartId() { return departId; } public void setDepartId(Integer departId) { this.departId = departId; } public String getDepartName() { return departName; } public void setDepartName(String departName) { this.departName = departName; } }
前台界面通过下拉框展示部门(通过JSTL标签循环出所有的部门):
<body> <form action="selectAction_test.action" method="post"> 请选择您的部门: <select name="depart" id="department"> <option>--请选择部门--</option> <c:forEach items="${departs}" var="dep"> <option value="${dep.departId}">${dep.departName}</option> </c:forEach> </select> </form> </body>
前台效果: