在 Select2 中动态添加选项和 optgroup

Posted

技术标签:

【中文标题】在 Select2 中动态添加选项和 optgroup【英文标题】:Dynamically adding options and optgroups in Select2 【发布时间】:2013-08-23 04:20:50 【问题描述】:

使用以下html

<input type='hidden' id='cantseeme'>

动态创建 Select2 控件并添加我的选项没有问题:

// simplified example
var select2_ary = [];

select2_ary.push(
    id : "one",
    text : "one"
);
select2_ary.push(
    id : "two",
    text : "two"
);

$("#cantseeme").select2(
    placeholder : "Pick a number",
    data : select2_ary
);

但是,我似乎无法弄清楚如何以这种方式添加optgroups。我在 github 上找到了 this 讨论,在博客上找到了 this 文章,但前者似乎没有讨论动态的 optgroup 添加,我根本无法理解后者。

有人有什么想法吗?

【问题讨论】:

【参考方案1】:

我在你链接到的 github 讨论中找到了答案,optgroups 的对象结构如下:


  id      : 1,
  text    : 'optgroup',
  children: [
                id  : 2,
                text: 'child1'
             ,
             
                id      : 3,
                text    : 'nested optgroup', 
                children: [...]
             ]

Demo fiddle

【讨论】:

facepalm 非常感谢。我因为错过了这个而感到很愚蠢。 Tbh,很惊讶以前没有人在这里问过这个问题! koala_dev,你发的小提琴好像失效了【参考方案2】:

是的,koala_dev 上面的回答是正确的。但是,如果您不希望选项组标题成为可选标签,则从传递给 select2 的标题中删除“id”字段。 Children[ ] 项目仍然需要一个“id”字段才能选择。例如:

// `Header One` Is Selectable
[
    id       : 0,
    text     : "Header One",
    children : [
        id   : 0,
        text : "Item One"
    ,  
        ...
    ]
] 


// `Header One` Is Not Selectable
[
    text     : "Header One",
    children : [
        id   : 0,
        text : "Item One"
    ,  
        ...
    ]
] 

【讨论】:

以上是关于在 Select2 中动态添加选项和 optgroup的主要内容,如果未能解决你的问题,请参考以下文章

使用格式动态设置 select2 选项

Select2动态添加图像图标到选项

如何在 select2 类型提前搜索中设置选项值以及如何从 ajax 数据添加选项组

angularjs在下拉框中添加选项动态显示

单击某些按钮后select2中的动态选项

如何根据选项类动态过滤 select2 列表