X可编辑的分组添加到下拉菜单

Question

我使用X-Editable创建了一个下拉框。效果很好，但是我想添加分组，这是我遇到问题的地方。

我可以添加称为Western的第一组，但是每次添加第二组时，代码都会失败。有没有人举例说明添加额外的分组和子级？

$('#booking_data').editable({
container: 'body',
selector: 'td.map5',
url: "update.php",
title: 'Map5',
type: "POST",
dataType: 'json',
source:
[
    {text: "Western", children:
        [
            {value: "T1-Bordeaux", text: "T1-Bordeaux"},
            {value: "T1-Grenoble", text: "T1-Grenoble"},
            {value: "T1-Gronigen", text: "T1-Gronigan"},
            {value: "T1-Le Mans", text: "T1-Le Mans"},
            {value: "T1-Rennes", text: "T1-Rennes"}
        ]
    }
],

validate: function(value){
if($.trim(value) == '')
{
return 'This field is required';
}
}
 });

  This produces this dropdown but I need a group of Central and Eastern too.

Existing Menu

Answer 1

已解决：花了很长时间才能正确使用语法，但如果有人对此感兴趣，那么解决方案：

source:
[
{text: "Western-T1", children:
    [ 
        {value: "T1-Bordeaux", text: "T1-Bordeaux"},
        {value: "T1-Grenoble", text: "T1-Grenoble"},
        {value: "T1-Gronigen", text: "T1-Gronigan"},
        {value: "T1-Le Mans", text: "T1-Le Mans"},
        {value: "T1-Rennes", text: "T1-Rennes"}
    ]
},
{text: "Central-T1", children:
    [
        {value: "T1-Polask", text: "T1-Polask"},
        {value: "T1-Slutsk", text: "T1-Slutsk"},
        {value: "T1-Kursk", text: "T1-Kursk"},
        {value: "T1-Korocha", text: "T1-Korocha"},
        {value: "T1-Kyiv", text: "T1-Kyiv"}
    ]
},
 {text: "Eastern-T1", children:
    [
        {value: "T1-Sovietsk", text: "T1-Sovietsk"},
        {value: "T1-Urzhum", text: "T1-Urzhum"},
        {value: "T1-Kostroma", text: "T1-Kostroma"},
        {value: "T1-Yelnat", text: "T1-Yelnat"},
        {value: "T1-Zhirnov", text: "T1-Zhirnov"}
    ]
},