JSF Select分组处理

来源：互联网发布：磁力搜索引擎软件编辑：程序博客网时间：2024/06/04 17:49

网页开发中，对于下拉选择框（select）经常有分组的需求，如下图所示的世嘉车型选择，以三厢1.6L为例。

图中“世嘉2011款三厢1.6自动”和“世嘉2011款三厢1.6手动”即为select分组，下述探讨其在JSF中的实现方式。

【方式1】：使用SelectItemGroup

xhtml代码：

<h:form>

<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。

分享按钮