động thêm tùy chọn và optgroups trong Select2

Question

Với html sau:

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

Tôi đang gặp rắc rối không tạo một điều khiển Select2 động, và thêm tùy chọn của tôi:

// 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 
}); 

Tuy nhiên, tôi có thể dường như không biết cách thêm optgroups theo cách này. Tôi tìm thấy this thảo luận về github, và this bài viết trên blog, nhưng trước đây dường như không thảo luận về việc bổ sung động optgroup và tôi chỉ đơn giản là không thể thực hiện bất kỳ ý nghĩa nào sau này.

Bất kỳ ai có ý tưởng nào?

Answer 1

Tôi tìm thấy câu trả lời chôn bên trong các cuộc thảo luận github bạn liên kết với, cấu trúc đối tượng cho optgroups là như sau:

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

Demo fiddle

Answer 2

Vâng, câu trả lời của koala_dev trên là chính xác. Tuy nhiên, nếu bạn không muốn các tiêu đề nhóm tùy chọn là các thẻ có thể lựa chọn, thì hãy xóa trường "id" khỏi các tiêu đề mà bạn chuyển vào select2. Trẻ em [] mục vẫn cần một trường "id" để có thể chọn được. Ví dụ:

// `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" 
    }, { 
     ... 
    }] 
}]