Questions tagged [jquery-select2]

Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Stack Snippet Starter Pack

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<select class="select2">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

JavaScript

$('.select2').select2();

// get data when an option is selected
$('.select2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data.id, data.text);

    // other data, eg get data-more:  
    $(data.element).data("more")
});

// language example changing no results
$('.select2').select2({ 
    language: { 
        noResults: function () { return "try again"; } 
    }
});

Useful links

Related Tags

5563 questions
2
votes
1 answer

Updating the model does not update the view

I'm using what I believe to be the generally accepted ko.bindingHandler.select2: ko.bindingHandlers.select2 = { init: function (element, valueAccessor) { $(element).select2(valueAccessor()); …
Justin
  • 10,667
  • 15
  • 58
  • 79
2
votes
0 answers

select2 with ajax even not sending request

no request to /example is sent when seen in firebug. and select2 is not activated. HTML Java Script $("#e1").select2( { placeholder: "Select a State", blurOnChange:…
Sagar
  • 980
  • 1
  • 11
  • 27
2
votes
1 answer

Select2 AngularJS - How do i dynamically add a tag item?

I have a select2 input box the defined like this: Basically, while the user can type text into the input box (and…
Or A
  • 1,789
  • 5
  • 29
  • 55
2
votes
1 answer

Make a scrollabe input type text of select2

I'm using select2 in place of search box. Here i'm using to load countries values like this
rkj
  • 541
  • 3
  • 12
  • 25
2
votes
1 answer

How to format tags with select2 and x-editable

I'm writing an application based on Django and Bootstrap that displays media files as thumbnails, along with a description and tags. I'd like these tags to be styled as regular Bootstrap labels and to be clickable. I'm using X-editable to…
David Planella
  • 2,313
  • 2
  • 25
  • 30
2
votes
1 answer

JQuery Select2 doesn't change the html option as selected

In my asp.net project I use a modified Listbox control to show a multiple selection dropdownbox, which I present visually using Select2(); I set AutoPostBack="True" so that after every action I can change an object in code behind. However because…
Steven Ryssaert
  • 1,989
  • 15
  • 25
2
votes
1 answer

angular-ui select2 tagging update the data value

So this is my select2 input where in tagOptions is { data:…
fxck
  • 4,898
  • 8
  • 56
  • 94
2
votes
1 answer

How to apply a complex style to the selection of a Select2 component?

Today I ran into a seemingly simple styling task when using the Select2 plugin, but it seems that the thing I want to achieve is more difficult than I thought. Here's what I want to do: The user should be able to choose a contact from a dropdown…
MichaelB
  • 465
  • 6
  • 16
2
votes
5 answers

Select2 initSelection PreLoaded Data doesn't show

I'm using select2 to loading remote data into a select, the input tag has a value attribute preloaded that points to a preselected option, when I load the page, it show the select with the Clear option (x) at the right but the data doesn't…
user2200620
  • 41
  • 1
  • 1
  • 4
2
votes
1 answer

limit to 1 the select2 suggestions if exist 2 or more equal results

I have this json on /api/searches file: [{"id":"513dbb61a61654a845000005","text":"ingeniero agrónomo"},{"id":"513a11d4a6165411b2000008","text":"ingeniero agrónomo"}] I'm using select2 to show results. This is my select2…
hyperrjas
  • 10,666
  • 25
  • 99
  • 198
2
votes
1 answer

how replace select2 default spinner?

How replace the select2 spinner.gif? I have tried with the next css: .select2-container-multi .select2-choices .select2-search-field input.select2-active { background: #fff url('custom-spinner.gif') no-repeat 100% !important; background: #fff…
hyperrjas
  • 10,666
  • 25
  • 99
  • 198
2
votes
1 answer

AngularJS ui-select2 placeholder not showing inside nested ng-repeat

whew, ok. scoping nightmares. My placeholders in my inputs are not showing, they work as standalone inputs - but as soon as they are added to a list they lose scope. I have identified the issue - but I can't find a workaround - I think if I can…
Jeff Voss
  • 3,637
  • 8
  • 46
  • 71
2
votes
1 answer

Passing an array in data section of select2 jquery plugin

i have a problem with the Select2 jquery plugin (with MVC3, Razor and Knockout JS) and a custom parameter that i want to pass to my ajax call. I have this code: $('#QuickSearchPresentation').select2({ placeholder: "Search for a movie", …
Phoenix_uy
  • 3,173
  • 9
  • 53
  • 100
2
votes
2 answers

Select2 tagging input loses value AngularJS

I have an app that switches views with ng-switch, while switching views my tagging input specifically loses its value and falls into its object string, none of my other inputs suffer this issue: HTML:
Jeff Voss
  • 3,637
  • 8
  • 46
  • 71
2
votes
1 answer

How to use select2 infinite scroll with coldfusion?

http://ivaynberg.github.com/select2/#infinite the example given isn't explained very well and I have no idea what is happening on the back end to produce those results. Edit: I have changed my cfc to return a limited amount of rows from the query. I…
Jake Zeitz
  • 2,429
  • 3
  • 23
  • 43
1 2 3
99
100