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
416
votes
36 answers

Select2 doesn't work when embedded in a bootstrap modal

When I use a select2 (input) in bootstrap modal, I can't type anything into it. It's like disabled? Outside the modal select2 works fine. Working example: http://jsfiddle.net/byJy8/1/ code:
272
votes
45 answers

Reset select2 value and show placeholder

How do I set the placeholder on value reset by select2. In my example If locations or grade select boxes are clicked and my select2 has a value than the value of select2 should reset and show the default placeholder. This script is resetting the…
fefe
  • 8,755
  • 27
  • 104
  • 180
246
votes
21 answers

select2 - hiding the search box

For my more significant selects, the search box in Select2 is wonderful. However, in one instance, I have a simple selection of 4 hard-coded choices. In this case, the search box is superfluous and looks a little silly being present. Is it possible…
EleventyOne
  • 7,300
  • 10
  • 35
  • 40
173
votes
15 answers

set the width of select2 input (through Angular-ui directive)

I have problem making this plunkr (select2 + angulat-ui) work. http://plnkr.co/edit/NkdWUO?p=preview In local setup, I get the select2 work, but I cannot set the width as described in the docs. It is too narrow to be used. Thank you. EDIT: Never…
bsr
  • 57,282
  • 86
  • 216
  • 316
157
votes
11 answers

What are the differences between Chosen and Select2?

Chosen and Select2 are the two more popular libraries for extending selectboxes. Both seem to be actively maintained, Chosen is older and supports both jQuery and Prototype. Select2 is jQuery only, its documentation says Select2 is inspired by…
Boycott Russia
  • 11,818
  • 5
  • 28
  • 29
154
votes
35 answers

How to set selected value of jQuery Select2?

This belong to codes prior to Select2 version 4 I have a simple code of select2 that get data from AJAX. $("#programid").select2({ placeholder: "Select a Program", allowClear: true, minimumInputLength: 3, ajax: { url: "ajax.php", …
ClearBoth
  • 2,235
  • 2
  • 18
  • 24
137
votes
9 answers

Select2 dropdown but allow new values by user?

I want to have a dropdown with a set of values but also allow the user to "select" a new value not listed there. I see that select2 supports this if you are using it in tags mode, but is there a way to do it without using tags?
johnjohn
  • 4,221
  • 7
  • 36
  • 46
123
votes
12 answers

"query function not defined for Select2 undefined error"

Trying to use Select2 and getting this error on multiple item input/text field: "query function not defined for Select2 undefined error"
Daniel Morris
  • 6,852
  • 8
  • 25
  • 30
114
votes
3 answers

Is there a properly tested alternative to Select2 or Chosen?

I am looking for an alternative to Select2 that basically provides the same functionality, but includes proper tests. The quest for the holy grail? The last unicorn?
Joseph Tura
  • 6,290
  • 8
  • 47
  • 73
110
votes
14 answers

How can I set the initial value of Select2 when using AJAX?

I have a select2 v4.0.0 being populated from an Ajax array. If I set the val of the select2 I can see via javascript debugging that it has selected the correct item (#3 in my case), however this is not shown in the select box, it is still showing…
Greg
  • 1,803
  • 3
  • 18
  • 26
110
votes
12 answers

jQuery select2 get value of select tag?

Hello friends this is my code: This is my select2 code: $("#first").select2(); Below is code for…
Renish Khunt
  • 5,620
  • 18
  • 55
  • 92
106
votes
8 answers

How to use Select2 with JSON via Ajax request?

My Select2 3.4.5 is not working with JSON data. Here is my input box on HTML: …and my JavaScript $(".itemSearch").select2({ placeholder: "Search for an…
melvnberd
  • 3,093
  • 6
  • 32
  • 69
98
votes
37 answers

How do I change select2 box height

I love the select2 box from https://github.com/ivaynberg/select2 I am using the format: option to format each element, and it looks great. Everything is fine except the selected element is bigger than the height of the select box due to an image. I…
relipse
  • 1,730
  • 1
  • 18
  • 24
89
votes
11 answers

How to get Selected Text from select2 when using

I am using the select2 control, loading data via ajax. This requires the use of the tag. Now, I want to retrieve the selected text. (The value property in the data-bind expression sotres the id only) I have tried…
robasta
  • 4,621
  • 5
  • 35
  • 53
84
votes
7 answers

Trigger an action after selection select2

I am using select2 library for my search. is there any way to trigger an action after selecting a search result? e.g. open a popup, or a simple js alert. $("#e6").select2({ placeholder: "Enter an item id please", minimumInputLength: 1, …
spyfx
  • 1,311
  • 4
  • 14
  • 24
1
2 3
99 100