Добавить динамический параметр внутри optgroup в select2 - PullRequest
Новая
       9

Добавить динамический параметр внутри optgroup в select2

0 голосов
/ 18 октября 2018

У меня есть 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/

Первая новая вставка работает.Другие новые вставки не работают ...

1 Ответ

0 голосов
/ 18 октября 2018

Инициирование изменений не будет работать согласно # 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>
...