将按钮添加到 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 下拉列表?

在与下拉列表分开的输入中显示 select2“药盒”

如何将模型数据加载到在 Yii 中使用 Ajax 过滤的 Select2 下拉列表

Select2 奇怪的下拉定位

Yii2:Gridview过滤器中的kartik\Select2下拉列表

如何在select2下拉列表中换行?