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
57
votes
17 answers

Clear dropdown using jQuery Select2

I'm trying to programmatically clear a drop down using the fantastic Select2 library. The drop down is dynamically filled with a remote ajax call using the Select2 query option. HTML:
wheaties
  • 35,646
  • 15
  • 94
  • 131
56
votes
11 answers

How to clean completely select2 control?

I'm working with the awesome select2 control. I'm trying to clean and disable the select2 with the content too so I do this: $("#select2id").empty(); $("#select2id").select2("disable"); Ok, it works, but if i had a value selected all the items are…
mllamazares
  • 7,876
  • 17
  • 61
  • 89
55
votes
8 answers

Select2 performance for large set of items

I'm using select2 jquery plugin with twitter bootstrap. It's working fine for smaller number of items. But when the list is huge (more than 1500 items) it really slows down. It's slowest in IE. Normal Dropdownlist works very fast with more than 1500…
Manish
  • 1,246
  • 3
  • 14
  • 26
52
votes
14 answers

Cloned Select2 is not responding

I am trying to clone a row which contains select2 tool ,when i clone that row using jQuery the cloned select2 is not responding.In image given below first select2 which is original is working fine but 2nd and 3rd select2 which are cloned not…
ABC
  • 4,263
  • 10
  • 45
  • 72
51
votes
8 answers

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 described in the documentation and…
51
votes
4 answers

Is there any way to check if an element has jquery select2 already applied to it?

I want to apply select2 to a bunch of jquery elements on the page that all have the same class name but it looks like if i call select2() on an element that already has had a select2() called on it then it blows up. here is my code …
leora
  • 188,729
  • 360
  • 878
  • 1,366
51
votes
10 answers

Update select2 data without rebuilding the control

I am converting an to a select2 dropdown and feeding it data through the query method $('#inputhidden').select2({ query: function( query ) { query.callback( data ); // the data is in the format select2 expects and…
mfreitas
  • 2,395
  • 3
  • 29
  • 42
50
votes
4 answers

Using Select2 get error - "Error: No select2/compat/query"

I am attempting to use the Select2 library in my site to leverage placecomplete (following it's rather simple configuration steps here), but when I run the code I get a strange error - Error: No select2/compat/query` I've tried googling it and it…
Simon
  • 2,065
  • 3
  • 21
  • 28
50
votes
7 answers

Select2 limit number of tags

Is there a way to limit the number of tags a user can add to an input field using Select2? I have: $('#tags').select2({ containerCssClass: 'supplierTags', placeholder: "Usual suppliers...", minimumInputLength: 2, multiple: true, …
imperium2335
  • 23,402
  • 38
  • 111
  • 190
49
votes
15 answers

How to make select2 work with jquery.validation plugin?

I'm trying to validate select2 field using jquey.validation plugin but nothing happens. I want to make select required field. I'm using this custom validation function: $.validator.addMethod("requiredcountry", function(value, element, arg){ …
user2323711
  • 843
  • 1
  • 7
  • 13
49
votes
14 answers

Select2 not calculating `resolved` width correctly if select is hidden

I am using Twitter bootstrap and the fantastic Select2 plugin. These are working great, I realized you need to set {width: 'resolve'} when initiating Select2 otherwise it looks messed up!. But I am having an issue with one of my selects, as you can…
Hailwood
  • 89,623
  • 107
  • 270
  • 423
47
votes
13 answers

Select2: Hide certain options dynamically

Basically what I'm looking for is the ability to hide options from the dropdown of select items. So, technically they would still be options, but you just wouldn't be able to click them since they're hidden. I've looked through the docs and have…
jacheson
  • 1,303
  • 2
  • 12
  • 16
47
votes
17 answers

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 is possible to open the…
andreivictor
  • 7,628
  • 3
  • 48
  • 75
46
votes
9 answers

Select2 deselect all values

I want to deselect all values with one click without using each id seperately. I fiddled around for a while, but this deselect only first value. Any suggestions? This is how I try to deselect: $( "#mybutton" ).click(function() { …
Jaanus
  • 16,161
  • 49
  • 147
  • 202
43
votes
9 answers

How to remove selected option from the option list in select2 multiselect and show selected options in the order they are selected

I have select2 multi select field in my form where I want to remove the selected option from the dropdown list after it is selected and again add it to the list if it is removed from the list. And also the added items should be in the same order as…
user1614862
  • 3,701
  • 7
  • 29
  • 46