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

Question

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

Answer 1

您可以添加一个新选项选择2这样

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

}) 

Answer 2

基本上是KLD建议，但没有额外的按钮按我的理解OP想要使用的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 3

可能是你应该使用tags选项禁用搜索？

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

Answer 4

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内容 - 选择2 - “+ yourelementid +” - 结果，做任何你可以用它。刚才设置的结果作为选择框的VAL

check the image out

Answer 5

这里是我的方法

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

对这个问题各地挖了很长一段时间后...我认为我有这个问题的解决方案。

我注意到Select2似乎是在DOM中创建自己的结构 - 而不管Select与您正在进行交互。 - 这也看起来完全独立于您可能在DOM中创建的选择。

所以....一些摸索之后 - 我想出了下面的代码：

第一：在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; 
        }); 

二：创建一个映射到选择二临时输入和选择2 - search__field类的文档“的keyup”事件。这将捕获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的）
• 触发的选择二关闭
• 的选择二的值设置为新的值所附
• 触发最终选择二改变二展示新选项
• 完成！

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

希望这会有所帮助！我一直在努力。

这里是一个工作示例：

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

Answer 7

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