I need to add "Add new item" option in Select2

jquery jquery-select2 jquery-select2-4
Prabhakarank picture Prabhakarank · Jul 28, 2016 · Viewed 29.4k times · Source

I want to add a button in first element of the list to "Add new item". If user clicks on that button I need to open a pop-up and get the input from users. How to do this in select2 plugin? Is any default options for this (or) need to customize this?

Answer

user2976753 picture user2976753 · Jul 19, 2017

Here's my approach

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

enter image description here

Related questions

Select2 open dropdown on focus

I have a form with multiple text inputs and some select2 elements. Using the keyboard to tab between fields works fine - the Select2 element behaves like a form element and receives focus when tabbing. I was wondering if it …

Read More
How to render html in select2 options

In this example of data loaded from a remote source I can see images and other html elements rendered as options. I'd like to accomplish the same thing using data in a local array. I've tried building an array as …

Read More
Select2 v4 how to paginate results using AJAX

I'm trying to paginate results (every 25 rows) using Select2 4.0, but I don't know how to achieve it. Does somebody know how to do it? If the user reach the end of the 25 rows and if there is more rows I …

Read More