我需要在Select2中添加"添加新项"选项

Question

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

Answer 1

这是我的方法

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

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

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>");
      }
    });

});

输出如下所示：

Answer 4

基本上是Kld提出的建议，但是据我所知，没有其他按钮，OP希望使用of的第一个选项select来触发新值模态。它在触发select2：close事件时检查该值，如果"NEW"选择了该事件，则提示输入新值，并在select框的末尾添加并选择它。

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

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

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

Answer 5

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

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

})