网页开发中,对于下拉选择框(select)经常有分组的需求,如下图所示的世嘉车型选择,以三厢1.6L为例。
图中“世嘉2011款 三厢1.6自动”和“世嘉2011款 三厢1.6手动”即为select分组,下述探讨其在JSF中的实现方式。
【方式1】:使用SelectItemGroup
xhtml代码:
<h:form> <fieldset> <legend>JSF Select分组处理</legend> <h:outputText value="世嘉1.6L车型选择: " /> <h:selectOneMenu value="#{testMB.carType}"> <f:selectItems value="#{testMB.carTypes}"></f:selectItems> </h:selectOneMenu> </fieldset> </h:form> |
Java代码:
private String carType; public String getCarType() { return carType; } public void setCarType(String value) { this.carType = value; }
public List<SelectItem> getCarTypes() { List<SelectItem> items = new ArrayList<SelectItem>(); SelectItemGroup group1 = new SelectItemGroup("世嘉 2011款 三厢 1.6自动"); group1.setSelectItems(new SelectItem[] { new SelectItem("自动时尚", "自动时尚"), new SelectItem("自动冠军", "自动冠军"), new SelectItem("自动尊享", "自动尊享"), new SelectItem("自动豪华", "自动豪华") }); items.add(group1);
SelectItemGroup group2 = new SelectItemGroup("世嘉 2011款 三厢 1.6手动"); group2.setSelectItems(new SelectItem[] { new SelectItem("手动时尚", "手动时尚"), new SelectItem("手动冠军", "手动冠军"), new SelectItem("手动舒适", "手动舒适") }); items.add(group2); return items; } |
【方式2】:使用SelectItem的disable
xhtml代码:同上
Java代码:
private String carType; public String getCarType() { return carType; } public void setCarType(String value) { this.carType = value; }
public List<SelectItem> getCarTypes() { List<SelectItem> items = new ArrayList<SelectItem>(); items.add(new SelectItem("世嘉 2011款 三厢 1.6自动", "世嘉 2011款 三厢 1.6自动","",true)); items.add(new SelectItem("自动时尚", "自动时尚")); items.add(new SelectItem("自动冠军", "自动冠军")); items.add(new SelectItem("自动尊享", "自动尊享")); items.add(new SelectItem("自动豪华", "自动豪华"));
items.add(new SelectItem("世嘉 2011款 三厢 1.6手动", "世嘉 2011款 三厢 1.6手动","",true)); items.add(new SelectItem("手动时尚", "手动时尚")); items.add(new SelectItem("手动冠军", "手动冠军")); items.add(new SelectItem("手动舒适", "手动舒适")); return items; } |
由于IE6、IE7不支持option的disable属性,因此设置SelectItem的disable在IE6、IE7下失效。为此建议大家使用SelectItemGroup,对应html元素即optgroup。
分享按钮