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
81
votes
15 answers

Select2() is not a function

I have downloaded select2 and "installed it" by putting it into my folder. I then loaded it on my site and when I check the console I can see the file select2.js (where I see all of the scripts being loaded). I went to their documentation, copied…
Marc Rasmussen
  • 19,771
  • 79
  • 203
  • 364
79
votes
4 answers

Tagging with AJAX in select2

I am doing tagging with select2 I have these requirements with select2: I need to search some tags using select2 ajax Also I need to use "tags" in select2 which Allows values that are not in the list(Ajax result). Both the scenarios work…
Sri
  • 1,505
  • 2
  • 18
  • 35
75
votes
14 answers

JQuery select2 set default value from an option in list?

I want to be able to set the default/selected value of a select element using the JQuery Select2 plugin.
user857276
  • 1,407
  • 1
  • 14
  • 19
74
votes
14 answers

select2 force focus on page load

I am trying to make a select2 box appear in its focused state on page load. I have tried the following: $('#id').select2('focus'); $('#id').trigger('click'); $('#id').trigger('focus'); Only the first line seems to have any effect, and it does focus…
user984976
  • 1,314
  • 1
  • 12
  • 21
73
votes
7 answers

Select2 Ajax Method Not Selecting

Ok, I'm sure there's something simple set wrong here but I'm not 100% what it is. So I am trying to use Select2 AJAX method as a way of users to search a database and select a result. The call itself is coming back with results, however it will not…
AlbertEngelB
  • 16,016
  • 15
  • 66
  • 93
72
votes
8 answers

select2 changing items dynamically

I have two selects that are linked: Each value of the first select determines which items will be displayed in the second select. The values of the second select are stored in a two-dimension array: [ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...], …
Pherrymason
  • 7,835
  • 8
  • 39
  • 57
71
votes
9 answers

Get Selected value from Multi-Value Select Boxes by jquery-select2?

I am using Select2 Jquery to bind my dropdown which is used for multiple selection . I am using select2 jquery. It's working fine, I can bind my dropdown but I need to get the selected value from my multi-value selector. I am…
Kaps Hasija
  • 2,097
  • 5
  • 23
  • 31
69
votes
16 answers

How to Set Selected value in Multi-Value Select in Jquery-Select2.?

I am binding my dropdown with Jquery-Select2. It's working fine but now I need to bind my Multi-Value selectBox by using Jquery-Select2. My DropDown
naviram
  • 1,445
  • 1
  • 15
  • 26
61
votes
9 answers

Dynamically add item to jQuery Select2 control that uses AJAX

I have a jQuery Select2 control that uses AJAX to populate: var initialSelection = { id: '999', text:"Some initial option"}; $("#select2").select2({ placeholder:…
Bumptious Q Bangwhistle
  • 4,689
  • 2
  • 34
  • 43
59
votes
5 answers

$watch not firing on data change

I have a watch setup against the model of a ui-select2 dropdown (from ui-bootstrap). The watch fires on load but not on data changes and I can't figure out why. It isn't the usual problem of not $apply'ing the model change or not using the third…
µBio
  • 10,668
  • 6
  • 38
  • 56
58
votes
4 answers

How to remove select2 from dom

Say we have a simple select2 list: Initiated like: $("#e1").select2(); How can I remove select2 and return it to a regular dropdown? I…
jdennison
  • 2,000
  • 2
  • 15
  • 22