Add a button to Select2 Dropdown list

4

I am using the lastest version of Select2. Want to add an Insert New button at the end of the dropdown list. I tried these two solutions I found online

Solution 1:

$(".select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');

Solution 2

$("#itemId0").select2("container").find("div.select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');

With Solution 1 nothing happens. With solution 2 I get the error message in the select 2 js file

0x800a138f - JavaScript runtime error: Unable to get property 'apply' of undefined or null reference

Can anyone please help?

Here is my HTML

  <select id='itemId0' name='product[0][name]' class='form-control col-lg-5 itemSearch' >
                                <option></option>
                            </select>

AND the full 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 width="100%"><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 width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
jquery-select2
jquery-select2-4
asked on Stack Overflow Feb 11, 2016 by Daniel Antwi • edited Feb 12, 2016 by Daniel Antwi

2 Answers

0

If you use the Select2 Bootstrap Theme you can accomplish this easily.

Be aware that this theme is for Bootstrap 3.

answered on Stack Overflow Jul 20, 2018 by w.guerra
-1

https://select2.org/

This is a javascript package that can be used to make a searchable dropdown e.g.

$('#yourSearchableDropdown').select2();

https://select2.org/getting-started/basic-usage

Make sure to import the select2 script.

answered on Stack Overflow Nov 21, 2018 by Mo D Genesis

User contributions licensed under CC BY-SA 3.0