时间戳

首页 > 解决方案 > 将 optgroup 中的动态选项添加到 select2

jquery - 将 optgroup 中的动态选项添加到 select2

问题描述

我有一个这样的select2：

<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>

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

$('#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');

        }

 }

});

因此，例如，如果我写“新文件夹”，我需要将它附加optgroup到label="Private folders".

我的脚本仅在 optgroup“私人文件夹”不存在时才有效。如果它已经存在，则什么都没有。

看我的小提琴：https ://jsfiddle.net/rLmztr2d/4054/

第一个新插入作品。其他新插件不起作用...

标签： jqueryjquery-select2

解决方案

根据＃2，触发更改将不起作用，我已经应用了更改，并且现在应该可以进行以下操作。

您有以下问题

  1. data.ID应该data.id
  2. 参考：https ://github.com/select2/select2/issues/2830#issuecomment-75008648

请看一下这段代码。

var options = {
    tags: true,
    createTag: function(params) {
        return {
            id: params.term, //	UTILIZZATO PER INSERIRE NUOVO VALORE NEL DATABASE
            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;
    }
}

var $select2 = $('#example').select2(options);
$select2.on('select2:select', function(e) {
    debugger;
    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)

        }
        $select2.select2(options);




    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example" style="width: 300px">

   <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>

<p>
Write a new name folder to add it as a PRIVATE folder
</p>

推荐阅读