将按钮添加到 Select2 下拉列表
Posted
技术标签:
【中文标题】将按钮添加到 Select2 下拉列表【英文标题】:Add a button to Select2 Dropdown list 【发布时间】:2016-05-22 10:13:14 【问题描述】:我正在使用最新版本的 Select2。想要在下拉列表的末尾添加一个插入新按钮。我尝试了我在网上找到的这两个解决方案
解决方案 1:
$(".select2-drop").append('<table ><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
解决方案 2
$("#itemId0").select2("container").find("div.select2-drop").append('<table ><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
使用解决方案 1 没有任何反应。使用解决方案 2,我在选择 2 js 文件中收到错误消息
0x800a138f - javascript 运行时错误:无法获取属性“应用” 未定义或空引用
有人可以帮忙吗?
这是我的 html
<select id='itemId0' name='product[0][name]' class='form-control col-lg-5 itemSearch' >
<option></option>
</select>
以及完整的 select2 javascritp
function productFormatResult(product)
if (product.loading) product.text;
var html = "<table><tr>";
html += "<td>";
html += product.text;
html += "</td></tr></table>";
return html;
// alert(html);
function productFormatSelection(product)
var selected = "<input type='hidden' name='itemId' value='" + product.id + "'/>";
return selected + product.text;
//$("#itemId0").select2();
$("#itemId0").select2(
ajax:
url: "@Url.Action("GetProducts", "Inventories")",
dataType: 'json',
data: function (params)
return
q: params.term
;
,
processResults: function (data, params)
return results: data ;
,
cache: true
,
escapeMarkup: function (markup) return markup; ,
minimumInputLength: 1,
templateResult: productFormatResult,
templateSelection: productFormatSelection,
dropdownClass: 'bigdrop'
);
// $(".select2-drop").append('<table ><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
$("#itemId0").select2("container").find("div.select2-drop").append('<table ><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
【问题讨论】:
请给出完整的例子,html看起来如何?此实例中包含哪些 javascript 文件? 你想清楚了吗?我在获取 select2 的容器时遇到了完全相同的问题 这篇文章可能会有所帮助***.com/questions/20977400/… 【参考方案1】:检查一下
$('#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;
);
更新:(解释)
如果您需要在 select2 中添加按钮,如果没有找到结果,您只需要从 noResults 函数中返回 HTML 按钮代码并添加 escapeMarkup 函数以呈现自定义模板。
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;
试试下面的例子看看它的样子。
https://jsfiddle.net/Hamza_T/yshjqw85/32/
【讨论】:
请在您的回答中添加一些解释【参考方案2】:这是codepen中的一个例子
html
在下面
<select id="CustomSelect" multiple="multiple">
<option value="volvo">BMW</option>
<option value="saab">Jaquar</option>
<option value="mercedes">RR</option>
<option value="audi">Audi</option>
</select>
CSS
在下面
body
background: #20262E;
padding: 20px;
font-family: Helvetica;
#banner-message
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
button
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
#banner-message.alt
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
#banner-message.alt button
background: #fff;
color: #000;
Script
在下面
$("#CustomSelect").select2(
width: '100%',
allowClear: true,
closeOnSelect: false
).on('select2:open', function ()
let a = $(this).data('select2');
if (!$('.select2-link').length)
a.$results.parents('.select2-results')
.append('<div class="select2-link2 select2-close"><button>Close</button></div>')
.on('click', function (b)
);
);
【讨论】:
【参考方案3】:我认为这可以通过 Select2 的适配器和装饰器 (https://select2.org/advanced/default-adapters) 来完成。但是,我个人觉得这种方法非常繁重,老实说,我不了解这方面的文档。
我个人所做的是绑定 select2:open
-event 并附加一个 add-new-button 容器。
这是一个例子:
// create new container
$('#select2').select2CreateNew("Create new");
// generic function
$.fn.select2CreateNew = function( text )
// bind to "open"-event
this.on( 'select2:open', function( e )
let name = $( this ).attr( 'name' );
let html = '<div class="s-add-new-container">' + text + '</div>';
let $resultContainer = $( '[aria-controls="select2-' + name + '-results"]' )
.closest( '.select2-dropdown' ).find( '.select2-results' );
// avoid duplicates ~ append "create new" to result bottom
if ( $resultContainer.find( '.s-add-new-container' ).length === 0 ) $resultContainer.append( html );
);
自定义代码或添加一些点击事件处理程序,用于每当用户点击容器时。
对于样式我使用这个 CSS:
.s-add-new-container
padding: 7px;
background: #f1f1f1;
border-top: 1px solid #c7c7c7;
.select2-dropdown.select2-dropdown--below
border-radius: 0px;
box-shadow: 0px 5px 10px #6b6b6b59;
.s-add-new-container:hover
background: #3db470;
color: white;
cursor: pointer;
【讨论】:
以上是关于将按钮添加到 Select2 下拉列表的主要内容,如果未能解决你的问题,请参考以下文章
jquery - 如何使用通过 AJAX 从 MySQL 和 PHP 检索的数据将图像添加到 Select2 下拉列表?
如何将模型数据加载到在 Yii 中使用 Ajax 过滤的 Select2 下拉列表