There are a few folks asking how they can insert something to the bottom of the Select2 javascript control and I have came up with a solution as shown below in my jsfiddle. All I am doing is making use of the query function that select2 provides as outlined here: Select2 Documentation. Also take note of what I am returning in the results, basically I am making use of select2’s ability to create grouped headers and use a “children” parameter to show that list. All I had to do was add in whatever I wanted my bottom link to say and voila, I have an entry to allow the user to click on and perform an action.
NOTE: Newer versions > 3.2 do not show html as output, the newer version of the control is overriding the output somehow and just rendering the text, I was too lazy to figure out what is going on so I just thought I would give a heads up.
UPDATE: The Select2 (currently at 3.4.5) control has been updated with the escapeMarkup parameter, simply add a line like this to your options of your select2 element: “escapeMarkup: function (m) { return m; }” and you can have clickable links back in your dropdown.
Here is the pull request for it: https://github.com/ivaynberg/select2/pull/1817?source=cc
