Question

我想在列表的第一个元素中添加一个按钮，添加到“添加新项目”。如果用户点击该按钮，我需要打开一个弹出窗口并获取用户的输入。如何在select2插件中执行此操作？此（或）的任何默认选项是否需要自定义？

Answer 1

基本上是Kld所建议的，但没有额外的按钮，因为我知道OP想要使用select的第一个选项来触发新的值模态。它会在触发select2：close事件时检查值，如果选择了"NEW"，则提示输入新值，在select框的末尾添加并选择它。

注意：我已在输入中禁用了搜索并添加了占位符

＆＃13;

$(function () {
  $(".select2")
  .select2({
    placeholder: 'Select type',
    width: '50%',
    minimumResultsForSearch: Infinity
  })
  .on('select2:close', function() {
    var el = $(this);
    if(el.val()==="NEW") {
      var newval = prompt("Enter new value: ");
      if(newval !== null) {
        el.append('<option>'+newval+'</option>')
          .val(newval);
      }
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="mySel" class="select2">
  <option></option>
  <option value="NEW">Add new type</option>
  <option>Car</option>
  <option>BUS</option>
  <option>TWO</option>
  <option>THREE</option>
</select>

＆＃13;

Answer 2

这是我的方法

$('#select2')
    .select2()
    .on('select2:open', () => {
        $(".select2-results:not(:has(a))").append('<a href="#" style="padding: 6px;height: 20px;display: inline-table;">Create new item</a>');
})

Answer 3

  $('#my-select2').select2().on('select2:open', function () {
            var a = $(this).data('select2');
            if (!$('.select2-link').length) {
                a.$results.parents('.select2-results')
                        .append('<div class="select2-link"><a>New item</a></div>')
                        .on('click', function (b) {
                            a.trigger('close');

                            // add your code
                        });
      }
   });

Answer 4

您可以通过这种方式向select2添加新选项

$('button').click(function(){
  var value = prompt("Please enter the new value");
  $(".mySelect")
    .append($("<option></option>")
    .attr("value", value )
    .text(value ));

})

Answer 5

您可以使用tags选项吗？

https://select2.github.io/options.html#can-options-be-created-based-on-the-search-term

Answer 6

jQuery("#select2-"+yourelementid+"-container").off().on('click',function(){
                        jQuery("#yourelementid"_add").remove();
                        jQuery("#select2-"+yourelementid+"-results").after("<div id='"+yourelementid+"_add' >optionnameforadding</div> ").promise().done(function(){
                            jQuery("#"+yourelementid+"_add").off().on('click',function(){
                            //  yourfunctionfordisplayingdiv
                            });
                        });
                    });

你可以在ul列表后添加html内容 - select2 - “+ yourelementid +” - 结果，并尽可能地用它做。只需将结果设置为选择框的值

check the image out

Answer 7

显示代码段

$('#select2').select2({
       placeholder: 'This is my placeholder',    
         language: {
             noResults: function() {
            return `<button style="width: 100%" type="button"
            class="btn btn-primary" 
            onClick='task()'>+ Add New Item</button>
            </li>`;
            }
         },
       
        escapeMarkup: function (markup) {
            return markup;
        }
    });
    
  function task()
  {
  alert("Hello world! ");
  }

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<br>
<div class="container">
<select id="select2" style="width: 70%">
        <option value="">Select</option>
        <option value="40">Fairy Floss Machine</option>
        <option value="30">Popcorn machine</option>
        <option value="20">Bubble Machine</option>
        <option value="10">Smoke Machine</option>
        <option value="0">party Effect Light</option>
</select>
</div>




<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

Answer 8

在深入研究这个主题已经有一段时间了......我想想我有解决这个问题的方法。

我注意到Select2似乎在DOM中创建了自己的结构 - 无论您正在与之交互的Select。 - 这似乎也完全独立于您在DOM中其他地方创建的Select。

所以......经过一番摆弄 - 我想出了以下代码：

首先：创建对DOM中所有选择的全局绑定。这仅用于设置当前用户正在使用的“内容”的临时引用 - 创建可在以后使用的全局变量。

      $('select').select2().on('select2:open', function() {
                        // set a global reference for the current selected Select
                        console.log('found this ---> '+$(this).attr('id'));
                        if (typeof tempSelectedObj === 'undefined') {
                            tempSelectedObj = null;
                        }
                        tempSelectedObj = this;
                    });

第二：创建一个文档'keyup'事件，该事件映射到Select2临时INPUT和select2-search__field类。这将捕获Select2 INPUT的所有关键事件。但在这种情况下，我添加了一个keyCode === 13（返回字符）来初始化魔法。

    $(document).on('keyup','input.select2-search__field',function (e) {
                    // capture the return event
                    if (e.keyCode === 13) {

                        var newValue = $(this).val();
                        console.log('processing this: '+newValue);

                        // create new option element
                        var newOpt = $('<option>')
                            .val(newValue)
                            .text(newValue);

                        // append to the current Select
                        $(tempSelectedObj)
                            .append(newOpt);

                        // apply the change and set it
                        $(tempSelectedObj)
                            .val(newValue)
                            .select2('close');
                    }
                })

检测到返回字符时，会发生以下情况。

捕获当前值
创建一个新的DOM选项元素（jQuery）
设置新选项元素的值和文本
将新的选项元素附加到tempSelectedObj变量（jQuery）
触发Select2关闭
将Select2的值设置为附加的新值
触发最终的Select2更改以显示新选项
DONE！

显然，这个例子需要两段代码，但我认为对于一个很多人似乎正在努力解决的问题，这是一个非常灵活的方法。它足够通用，可以轻松地为其他目的量身定制。

希望这有帮助！我一直在努力解决这个问题。

这是一个有效的例子：

https://jsfiddle.net/h690bkmg/1/

Answer 9

试试这个对我有用

$('#yourDropdownId').select2({              
              ajax: {
                  url: productUrl, 
                  dataType: 'json',
                  data: function (params) {
                    var query = {
                      search: params.term,
                      page: params.page || 1
                    }

                    // Query parameters will be ?search=[term]&page=[page]
                    return query;
                  },processResults: function (data, params) {       
                      console.log(data)                                        
                          return {
                              results: $.map(data.items, function (item) {
                                  return {
                                      text: item.item_name,                        
                                      id: item.item_id
                                  }
                              })
                          };      
                  },    
                  cache: true,
                },language: {
                    noResults: function() {
                        return "<a  data-toggle='modal' data-target='#myModal' href='javascript:void();'>Open Model</a>";
                      }
                    },escapeMarkup: function (markup) {
                         return markup;
                    }


              });

Answer 10

我用于多项选择的修改后答案的修改版本

$('.select2').select2().on('select2:close', function() {
  var el, newOption, newval;
  el = $(this);
  if (el.val() !== null && el.val()[0] === '') {
    el.val(el.val().slice(1));
    el.trigger('change');
    newval = prompt("Enter new value:");
    if (newval !== null && newval !== '') {
      newOption = new Option(newval, newval, true, true);
      return el.append(newOption).trigger('change');
    }
  }
});

Answer 11

HTML代码

<div class="input-group">
<select class="form-control select2-hidden-accessible" data-plugin="select2" id='select' tabindex="-1" aria-hidden="true">
    <optgroup label="Select Cutomer">
    <option value="AK">Zilal</option>
    <option value="HI">Ajay</option>
    </optgroup>
    </select>
    <div class="wrapper" id="wrp" style="display: none;">
    <a href="#" id="type" class="font-weight-300" data-target="#mdl_Item" data-toggle="modal">+ Add New Vendor</a>
    </div>
    </div>

JavaScript代码：

$(document).ready(function () {
var flg = 0;
$('#select').on("select2:open", function () {
  flg++;
  if (flg == 1) {
    $this_html = jQuery('#wrp').html();
   $(".select2-results").append("<div class='select2-results__option'>" + 
  $this_html + "</div>");
}
});

输出如下所示：

我需要在Select2中添加“添加新项”选项

11 个答案: