如何添加 optgroup do dijit.form.Select 或其他小部件类型

Posted 2023-02-16

【中文标题】如何添加 optgroup do dijit.form.Select 或其他小部件类型

【英文标题】：How to add optgroup do dijit.form.Select or other widget type

【发布时间】：2017-05-04 13:44:05

【问题描述】：

我需要在 dijit/dojo 小部件中创建一个“类别”划分，可以是 dijit.form.Select 或其他类型。

视觉效果应该类似于（使用 optgroup 时）：

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

我的代码：

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();
);

【问题讨论】：

我想你已经知道了 ;)

【参考方案1】：

据我所知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 带有 ) 的元素。

A demo is visible here.

使用示例：

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');

---

替代解决方案： http://vafada.github.io/chosen-dojo/