I ended up solving this using the Select
and SelectOptions
components from wicket-extensions as mentioned by martin-g.
SelectOptions<Produce> fruitOptions = new SelectOptions<Produce>(
"fruits",
fruitCollection,
new FruitRenderer());
SelectOptions<Produce> vegetableOptions = new SelectOptions<Produce>(
"vegetables",
vegetableCollection,
new VegetableRenderer());
Select select = new Select("produceSelect",
new PropertyModel<Produce>(model, "favProduce"));
select.add(fruitOptions);
select.add(vegetableOptions);
The corresponding HTML looks something like this:
<select wicket:id="produceSelect" id="produceSelect">
<optgroup label="Fruits">
<wicket:container wicket:id="fruits">
<option wicket:id="option">Apple</option>
</wicket:container>
</optgroup>
<optgroup label="Vegetables">
<wicket:container wicket:id="vegetables">
<option wicket:id="option">Carrot</option>
</wicket:container>
</optgroup>
</select>
This produces a bit different but better end result as the optgroup
labels are bolded and cannot be selected:
+----------------+-+
| **Fruits** |▼|
| Apple +-+
| Orange |
| **Vegetables** |
| Carrot |
| Cucumber |
+----------------+
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…