我需要在 Select2 中添加“添加新项目”选项
Posted
技术标签:
【中文标题】我需要在 Select2 中添加“添加新项目”选项【英文标题】：I need to add "Add new item" option in Select2 【发布时间】：2016-12-02 19:29:48 【问题描述】：我想在列表的第一个元素中添加一个按钮来“添加新项目”。如果用户单击该按钮，我需要打开一个弹出窗口并获取用户的输入。 如何在 select2 插件中执行此操作？是否有任何默认选项（或）需要自定义？
【问题讨论】：
我在下面的代码中尝试了 select2 jsfiddle.net/KpKaran/rqtuk090 另一种解决方案：使用html代码***.com/questions/37797597/…自定义noResults 【参考方案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>');
)
【讨论】：
您可以使用 prepend 在顶部添加“创建新项目”链接。 如果Select通过data-toggle打开一个Modal，如何关闭它？【参考方案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>【讨论】：
【参考方案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
);
);
【讨论】：
一个副作用是每次打开下拉菜单时都会添加一个新按钮。 @TimCadieux 您可以在 select:close 事件中删除它并在 select:open 事件中添加它以避免这种行为。【参考方案4】：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>");
);
);
输出如下图所示：
【讨论】：
【参考方案5】：在这个问题上研究了很长一段时间后......我认为我有一个解决这个问题的方法。
我注意到 Select2 似乎在 DOM 中创建了自己的结构——与您正在与之交互的 Select 无关。 -- 这似乎也完全独立于您可能在 DOM 其他地方创建的 Select。
所以....经过一番摆弄 - 我想出了以下代码：
首先：为 DOM 中的所有 Select 创建一个全局绑定。这仅用于设置对当前用户正在使用的“内容”的临时引用——创建一个以后可以使用的全局变量。
$('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;
);
第二：创建一个映射到 Select2 临时 INPUT 和 select2-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) 触发 Select2 关闭 将 Select2 的值设置为附加的新值 触发最终的 Select2 更改以显示新选项 完成！显然，本示例需要这两段代码，但我认为对于很多人似乎都在努力解决的问题，这是一种非常巧妙的方法。而且它足够通用，可以轻松地为其他目的量身定制。
希望这会有所帮助！我已经为此苦苦挣扎了一段时间。
这是一个工作示例：
https://jsfiddle.net/h690bkmg/1/
【讨论】：
【参考方案6】：您可以通过这种方式向 select2 添加新选项
$('button').click(function()
var value = prompt("Please enter the new value");
$(".mySelect")
.append($("<option></option>")
.attr("value", value )
.text(value ));
)
【讨论】：
【参考方案7】：您应该使用tags 选项吗？
https://select2.github.io/options.html#can-options-be-created-based-on-the-search-term
【讨论】：
“点击那个按钮我需要打开一个弹出窗口”使用标签这是不可能的......【参考方案8】：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+"-results ，并尽你所能。只需将结果设置为选择框的 val
check the image out
【讨论】：
【参考方案9】：我用于多选的 modped 答案的修改版本
$('.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');
);
【讨论】：
【参考方案10】：显示片段
$('#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>【讨论】：
【参考方案11】：试试这个对我有用
$('#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;
);
【讨论】：
以上是关于我需要在 Select2 中添加“添加新项目”选项的主要内容，如果未能解决你的问题，请参考以下文章
如何在 select2 类型提前搜索中设置选项值以及如何从 ajax 数据添加选项组