I have a problem with the jQuery's Select2.
When the page loads, if O click on the search result it will select and trigger the event onchange, but only the first time.
If I search another time, it won't.
Here's my code (it's an Ajax based search):
jQuery('#search_code').select2({
'width': '600px',
'tokenSeparators': [',', ' '],
'closeOnSelect': false,
'placeholder': 'scan or type a SKU or product or ESN',
'minimumInputLength': 1,
'ajax': {
'url': 'lookProduct',
'dataType': 'json',
'type': 'POST',
'data': function (term, page) {
return {
barcode: term,
page_limit: 3,
page: page
};
},
'results': function (data, page) {
return {
results: data
};
}
}
}).on('change', function (e) {
var str = $("#s2id_search_code .select2-choice span").text();
DOSelectAjaxProd(this.value, str);
//this.value
}).on('select', function (e) {
console.log("select");
});
This question is related to
jquery
events
onchange
jquery-select2
As of version 4.0.0, events such as select2-selecting
, no longer work. They are renamed as follows:
- select2-close is now select2:close
- select2-open is now select2:open
- select2-opening is now select2:opening
- select2-selecting is now select2:selecting
- select2-removed is now select2:removed
- select2-removing is now select2:unselecting
Ref: https://select2.org/programmatic-control/events
(function($){_x000D_
$('.select2').select2();_x000D_
_x000D_
$('.select2').on('select2:selecting', function(e) {_x000D_
console.log('Selecting: ' , e.params.args.data);_x000D_
});_x000D_
})(jQuery);
_x000D_
body{_x000D_
font-family: sans-serif;_x000D_
}_x000D_
_x000D_
.select2{_x000D_
width: 100%;_x000D_
}
_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>_x000D_
_x000D_
<select class="select2" multiple="multiple">_x000D_
<option value="1">Option 1</option>_x000D_
<option value="2">Option 2</option>_x000D_
<option value="3">Option 3</option>_x000D_
<option value="4">Option 4</option>_x000D_
<option value="5">Option 5</option>_x000D_
<option value="6">Option 6</option>_x000D_
<option value="7">Option 7</option>_x000D_
</select>
_x000D_
My select2 element was not firing the onchange
event as the drop down list offered only one value, making it impossible to change the value.
The value not having changed, no event was fired and the handler could not execute.
I then added another handler to clear the value, with the select2-open
handler being executed before the onchange
handler.
The source code now looks like:
el.on("select2-open", function(e) {
$(this).val('');
});
el.on('change', function() {
...
});
The first handler clears the value, allowing the second handler to fire up even if selecting the same value.
This is what I am using:
$("#search_code").live('change', function(){
alert(this.value)
});
For latest jQuery users, this one should work:
$(document.body).on("change","#search_code",function(){
alert(this.value);
});
Apparently the change event is not fired if a selection already exists when using data. I ended up updating the data manually on select to resolve the problem.
$("#search_code").on("select2-selecting", function(e) {
$("#search_code").select2("data",e.choice);
});
I know this is pretty late but hopefully this answer will save others time.
This is due because of the items id being the same. On change fires only if a different item id is detected on select.
So you have 2 options: First is to make sure that each items have a unique id when retrieving datas from ajax.
Second is to trigger a rand number at formatSelection for the selected item.
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
.
formatSelection: function(item) {item.id =getRandomInt(1,200)}
$('#search_code').select2({
.
.
.
.
}).on("change", function (e) {
var str = $("#s2id_search_code .select2-choice span").text();
DOSelectAjaxProd(e.val, str);
});
Set your .on
listener to check for specific select2 events. The "change" event is the same as usual but the others are specific to the select2 control thus:
The names are self-explanatory. For example, select2-focus
fires when you give focus to the control.
Source: Stackoverflow.com