select2.github.io | See select2/docs for the new documentation website | Web Site library

I have a Django project in which I have a select dropdown like this:

But I want something like this:

My form looks like so: (after inspecting in developer tools) Administrator Member

If not select2, is there any other jquery library that can help me accomplish this?

I have tried following the Select2's documentation, and believe that if this way (for templates), we can span an image beside the option's text, then, there must be a way to span a "text description" too under each option. But I dont know how this can be achieved. All I have tried to do untill now is this:

I'm working with Bootstrap 4, and for the elements i want to use Select2. The problem is that it does not have a official Bootstrap 4 template, so i was looking and i found this project, which is awesome. But i having one issue with is-invalid class. When i use it, the borders change to red when the page loads and then return to its normal state

I try to make a simple class to use with the same Bootstrap color like

I am using select2 plugin.

On fiddle, it works fine. But Here are screenshots to explain my problem,

1. This is default order of dropdown.

1. When I select other option e.g. Inactive, then it goes to last option.

1. Check the position of inactive, after selected.

This is happening with every option.

I tried following alternatives,

• $("select").select2();
• $(".select").select2();
• $("#select").select2();

But nothing works,

Have anyone faced this issue ?

If Yes, please help me sort this problem.

I'm trying to use the select2 with an input group, but the button is always on the next line after the select2 control. If you remove the select2 class it works as expected. Why does the select2 bootstrap not honor the standard bootstrap input group classes if it's based on the bootstrap theme? What am I missing to ensure they are both on the same line and displayed as a group?

Without select2 class (and how I would like it to look)

With Select2

With Select2 and adding style="width:75%" (off at bottom)

I've got a select2 select menu.

Stripped version for example:

I have problem with Select2. Everything works almost fine, except i can't select any option. I'm using select2 3.5.3, KnockoutJS, CoffeeScript and JQuery. My select2 code:

I try to use the newest select2 v4.0.3 library in a web page. I used the given example on this page for tagging and tokenization. I tested it in different browsers. It works fine, but in Internet Explorer v.11 it behaves strangely:

I tried to add a new element which was not among the options. After typing a few characters, the cursor was taken away and I was not able to finish the word I was typing in. When I clicked into the select box to gain back the cursor, the half-entered word disappeared. So it seems to be impossible to type in more then 3-4 characters. I experienced the same on select2.github.io/examples page when opening it in IE.

I'll try to explain my problem as much as I can. I am trying to create, with select2 plugin, a way for the user to write some letters and on each letter pressed a call to an API that gives the first 20 results given by that API.

So I have my HTML select :

I have a function, when I change the option of my multiple select the output is "add option". The problem is, when I remove the option I don't want any output and I do not know how to achieve this: