CODEWITHSUNDEEP
javascriptjqueryjquery-select2
brianrhea
brianrhea

Reputation: 3724

Select2: override 'container' in formatSelection

Select2's formatSelection function provides a container that is the DOM element to which the selected choice should be appended.

http://ivaynberg.github.io/select2/index.html#documentation

I'm using this as a multiple selection implementation and I'm not able to find a way to override the default container, which is .select2-search-choice. I want the user to choose an option and have it appear in a location other than the input field itself.

In looking at Select2's source and the addSelectedChoice method, I'm not sure you're actually able to change the container. Any help is greatly appreciated.

Upvotes: 2

Views: 1430

Answers (1)

Isaac Kleinman
Isaac Kleinman

Reputation: 4432

My ad-hoc solution:

Add a similar looking container to your page:

 <div class="select2-container select2-container-multi" style="width: 200px;">
     <ul class="select2-choices choicesOutput"></ul>
 </div>

This will be the container to hold the chosen options.

Then, in the addSelectedChoice function, replace the following line:

choice.insertBefore( this.searchContainer );

with this: 

choice.appendTo("ul.choicesOutput");

Then, if you don't want the output box to be there when nothing has been selected, add this style to your CSS:

ul:empty
{
    display: none;
}

If you want the location to be dynamic, you can trace the call chain and pass a parameter through to replace ul.choicesOutput.

Upvotes: 1

Related Questions