Jquery 将optgroup内的动态选项添加到select2

我有一个选择2，如下所示：

<select id="example">
   <option value=""> - </option>
    <optgroup label="Private folders">
      <option value="1">Folder 1 private</option>
      <option value="2">Folder 2 private</option>
    </optgroup>
    <optgroup label="Public folders">
      <option value="3">Folder 1 public</option>
      <option value="4">Folder 2 public</option>
    </optgroup>  
</select>

- 
文件夹1专用
文件夹2专用
文件夹1公用
文件夹2公用

如果需要，我使用select2插件动态添加新文件夹。 我需要在optgroup“Private folders”中插入新文件夹

$（“#示例”）。选择2({
标签：是的，
createTag:函数（参数）{
返回{
id:params.term，
文本：params.term，
新选项：正确
}
},
templateResult:函数（数据）{
变量$result=$（“”）；
$result.text（data.text）；
if（data.newOption）{
$result.append（“（新）”）；
}
返回$result；
}
}).on（'select2:select'，函数（e）{
var数据=e.params.data；
var text=data.text；
if（data.newOption）{
if（$（'#示例optgroup[label=“Private folders”]'）。长度>0）{
var选项=$（“”）；
option.val（data.ID）；
备选案文（案文）；
$（“#示例optgroup[label=“Private folders”]”）；
$（'#示例'）.val（data.ID）.trigger（'change'）；
}否则{
var optgroup=$（''）；
optgroup.attr（'label'，'Private folders'）；
var选项=$（“”）；
option.val（data.ID）；
备选案文（案文）；
optgroup.append（选项）；
$（“#示例”）.append（optgroup）；
$（'#示例'）.val（data.ID）.trigger（'change'）；
}
}
});

因此，例如，如果我写“newfolder”，我需要将它附加到

optgroup

中，并使用

label=“Private folders”

我的脚本仅在optgroup“Private folders”不存在时工作。如果它已经存在，什么也不会发生

看我的小提琴：

---

第一个新的插入工作。其他新插入不起作用…

触发更改将不起作用，根据#2我已应用更改，下面的操作现在应该可以工作了

你有以下问题

data.ID

应该是

data.ID

参考：

请看一下这个代码

var选项={
标签：是的，
createTag:函数（参数）{
返回{
id:params.term，//UTILIZZATO PER INSERIRE NUOVO VALORE NEL数据库
文本：params.term，
新选项：正确
}
},
templateResult:函数（数据）{
变量$result=$（“”）；
$result.text（data.text）；
if（data.newOption）{
$result.append（“（新）”）；
}
返回$result；
}
}
变量$select2=$（“#示例”）.select2（选项）；
$select2.on（'select2:select'，函数（e）{
调试器；
var数据=e.params.data；
var text=data.text；
if（data.newOption）{
if（$（'#示例optgroup[label=“Private folders”]'）。长度>0）{
var选项=$（“”）；
option.val（data.id）；
备选案文（案文）；
$（“#示例optgroup[label=“Private folders”]”）；
$（'#示例'）.val（data.id）.trigger（“change”）；
}否则{
var optgroup=$（''）；
optgroup.attr（'label'，'Private folders'）；
var选项=$（“”）；
option.val（data.id）；
备选案文（案文）；
optgroup.append（选项）；
$（“#示例”）.append（optgroup）；
$（'#示例'）.val（data.id）
}
$select2.select2（选项）；
}
});

- 
文件夹1公用
文件夹2公用

写入新名称文件夹以将其添加为专用文件夹
触发更改将无法按照#2工作。我已经应用了更改，下面的操作现在应该可以工作了

你有以下问题

data.ID
应该是
data.ID
参考：
请看一下这个代码


var选项={
标签：是的，
createTag:函数（参数）{
返回{
id:params.term，//UTILIZZATO PER INSERIRE NUOVO VALORE NEL数据库
文本：params.term，
新选项：正确
}
},
templateResult:函数（数据）{
变量$result=$（“”）；
$result.text（data.text）；
if（data.newOption）{
$result.append（“（新）”）；
}
返回$result；
}
}
变量$select2=$（“#示例”）.select2（选项）；
$select2.on（'select2:select'，函数（e）{
调试器；
var数据=e.params.data；
var text=data.text；
if（data.newOption）{
if（$（'#示例optgroup[label=“Private folders”]'）。长度>0）{
var选项=$（“”）；
option.val（data.id）；
备选案文（案文）；
$（“#示例optgroup[label=“Private folders”]”）；
$（'#示例'）.val（data.id）.trigger（“change”）；
}否则{
var optgroup=$（''）；
optgroup.attr（'label'，'Private folders'）；
var选项=$（“”）；
option.val（data.id）；
备选案文（案文）；
optgroup.append（选项）；
$（“#示例”）.append（optgroup）；
$（'#示例'）.val（data.id）
}
$select2.select2（选项）；
}
});

- 
文件夹1公用
文件夹2公用

写入新名称文件夹以将其添加为专用文件夹

$('#example').select2({
    tags: true,
    createTag: function (params) {
        return {
            id: params.term,
            text: params.term,
            newOption: true
        }
    },
    templateResult: function (data) {
      var $result = $("<span></span>");
      $result.text(data.text);

        if (data.newOption) {
              $result.append(" <em>(new)</em>");
        }

        return $result;
     }
}).on('select2:select', function (e) {

        var data = e.params.data;

        var text = data.text;

        if (data.newOption) {

          if ( $('#example optgroup[label="Private folders"]').length > 0 ) {

               var option = $("<option></option>");     
               option.val(data.ID);
               option.text(text);
               $('#example optgroup[label="Private folders"]').append(option);
               $('#example').val(data.ID).trigger('change');

          } else {

                var optgroup = $('<optgroup>');
                optgroup.attr('label',"Private folders");
                var option = $("<option></option>");
                option.val(data.ID);
                option.text(text);
                optgroup.append(option);
                $('#example').append(optgroup);
                $('#example').val(data.ID).trigger('change');

        }

 }

});