如何使用JSON在select2中设置optgroup

时间:2015-12-22 19:52:39

标签: jquery json jquery-select2

如何将某些项目分组在单独的optgroups中?应该在不同的JSON对象中设置? select2文档中没有示例。任何帮助或指示都会有所帮助。

以下是select人口的示例代码:

jQuery代码:

 var data = [
          { id: 0, text: 'enhancement' }, 
          { id: 1, text: 'bug' }, 
          { id: 2, text: 'duplicate' }, 
          { id: 3, text: 'invalid' }, 
          { id: 4, text: 'wontfix' }
    ];

    $(".js-example-data-array").select2({
      data: data
    });

1 个答案:

答案 0 :(得分:15)

您需要在数组中设置children属性以允许optgroups

示例:https://jsfiddle.net/DinoMyte/8odneso7/13/

var data = [{
    id: 0,
    text: 'enhancement',
    children: [{
        id: 5,
        text: 'enhancement child1'
      },
      {
        id: 6,
        text: 'enhancement child2'

      }
    ]
  },
  {
    id: 1,
    text: 'bug'
  },
  {
    id: 2,
    text: 'duplicate'
  },
  {
    id: 3,
    text: 'invalid'
  },
  {
    id: 4,
    text: 'wontfix'
  }
];

$(".js-example-data-array").select2({
  data: data,
  width: 'auto'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select class="js-example-data-array">
</select>