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

我需要在dijit/dojo窗口小部件中創建「類別」部門可能是dijit.form.Select或其他類型。如何添加optgroup do 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(); 
});

來源

2017-05-04 Radex

I'think你已經在前面回答;） –

據我所知optgroup它不應該被支持直接在dijit。但是，您可以實現在視覺上類似的效果，在屬性label中添加HTML標記。

使用<i>標籤，這使得在widget斜體項（你可以添加真有你喜歡的東西，甚至是形象和風格是使用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是一個設置樣式，可搜索的下拉選擇框爲道場其包括選項分組（類似於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/

來源

2017-05-04 14:07:36 GibboK

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

回答

相關問題