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>
前台效果: