我需要在dijit / dojo小部件中创建一个“类别”分区，可以是<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>或其他类型。
视觉效果应该类似于（使用optgroup时）：
require(["dijit/form/Select", "dojo/_base/window", "dojo/domReady!"], function(Select, win){
new Select({
name: "select2",
options: [
{ label: "Volvo", value: "volvo" },
{ label: "Saab", value: "saab", selected: true },
{ label: "Mercedes", value: "mercedes" },
{ label: "Audi", value: "audi" }
]
}).placeAt(win.body()).startup();
});
我的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!-- Wrapper (pseudo body tag) -->
<table border="1" align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" valign="top" width="100%">
<!--Body Table-->
<table border="0" bgcolor="black" cellpadding="10" cellspacing="0" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<!--Content Table-->
<table border="0" bgcolor="white" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td lign="center" valign="top" width="">
<table border="0" bgcolor="white" cellpadding="" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<img src="https://docs.google.com/uc?id=0B3ruYAyZeJR3clo3dmJUbW5Ya1E" vspace="0" hspace="0">
</td>
</tr>
</tbody>
</table>
<table border="1" bgcolor="white" align="center" cellpadding="" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" valign="top" width="600">
<p>subhead</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr> <tr>
<td align="center" valign="top" width="600">
<p>Story</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>Picture</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--End Content Table-->
<!--Footer Table-->
<table border="1" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer1</p>
</td>
</tr>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer2</p>
</td>
</tr>
</tbody>
</table>
<!--End Footer Table-->
</td>
</tr>
</tbody>
</table>
<!--End Body Table-->
</td>
</tr>
</tbody>
</table>
</body>
</html>答案 0 :(得分：0)
据我所知optgroup，不应该直接在dijit中支持它。
但是，您可以在属性label中添加HTML标记，实现视觉上类似的效果。
使用<i>标签的示例，它使小部件中的条目变为斜体（您可以添加真正的内容，甚至是使用CSS的图像和样式）：
require(["dijit/form/Select", "dojo/_base/window", "dojo/domReady!"], function(Select, win){
new Select({
name: "select2",
options: [
{ label: "<i>Swedish Cars</i>", value: "" },
{ label: "Volvo", value: "volvo" },
{ label: "Saab", value: "saab", selected: true },
{ label: "<i>German Cars</i>", value: "" },
{ label: "Mercedes", value: "mercedes" },
{ label: "Audi", value: "audi" }
]
}).placeAt(win.body()).startup();
});
修改
为了为我的一个项目找到这个问题的解决方案，我创建了一个专用dijit-select-optgroup的新组件（MIT许可证）。
SelectOptgroup是一个可定制的，可搜索的下拉选择框 Dojo包括选项分组（类似于html 元素与）。
使用示例：
var instance = new SelectOptgroup({
options: [
{
label: 'Optgroup item',
value: '',
optgroup: true // mark menu item as optgroup
},
{
label: 'Option item',
value: 'option '// mark menu item as option
},
{
label: '', // empty strings mark menu item as separator
value: ''
},
{
label: '<div class="SelectOptgroup__nested"><span class="select__icon">Icon Text</span></div>', // html allowed in menu item
value: 'grunt'
}
]
}, 'domId');