Question

我有一个这样的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/

第一个新插入内容有效。其他人的新插入内容无效...

Answer 1

根据我已应用的更改＃2，触发更改将不起作用，并且以下内容现在应该可以使用。

您遇到以下问题

data.ID应该是data.id
引用：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>

在optgroup中将动态选项添加到select2

1 个答案: