Как решить проблему с добавлением optgroup в выпадающий список select2?

Question

Я пытаюсь сделать выпадение, используя selct2 все в JQuery. Итак, у меня есть вызов ajax, который отправляется с Java на мой Jquery, который содержит список родительских и дочерних элементов, и он хранится в списке как строки. Так, например:

WEB
-->Apache
-->Nginx
-->Random

DATABASE
-->Sql
-->NoSQL

COMPUTER SYSTEM
-->Windows File Share

Я ищу способ заполнить выпадающий список select2, сделав <optgroup> и имея значения внутри этой группы. Я изучал создание HashMap или другого способа, но не знал, как это сделать go в JQuery. Пожалуйста помоги. Ниже приведен код, который я получил до сих пор, но он просто добавляет все как option, а не окружает его в optgroup.

Код:

$.each(result, function(i, obj) {

                                    var div_data = "<option value=" + obj + ">"
                                            + obj + "</option>";
                                $(div_data).appendTo('#selectData2');
                                });

Answer 1

Вот jsFiddle , который предполагает, что вы получаете объект JavaScript, структурированный как мой пример:

// Example javascript object where the option group title is the key/index
// and the options for each are an array
var example_object = {
'Web': ['apache','nginx','random'],
'Database': ['sql','nosql'],
'Computer System': ['Windows','Other']
};

// The element you're appending options to
var select = $('select');

// Loop through each item in the object
$.each(example_object, function(category,items){

  // Create an optgroup element with jQuery, the label is the category
    var group = $('<optgroup>').attr({label: category});

  // Loop through items in that category
  $.each(items, function(index,item){

    // Create an option element with jQuery, set the value and html
    // Append to the group
    $('<option>').attr({value: item}).html(item).appendTo(group);

  })

  // Now we have an optgroup containing all of the children items
  // Append to select element
  group.appendTo(select);

})

Это не идеально, но я надеюсь, что это поможет !