Select2 showing undefined when a value is selected
I am using select2 plugin but I lost it select2 selected value, instead it shows "undefined"
Here is my code, I am using a select box to pull data from the request and also do a data lookup and return a json response and populate the data in the select box:
previously i used hidden field and it all only worked with excluding impressions "undefined to selected value"
, the time i changed it to select it is broken.
Here is my code:
<select data-placeholder="Select a city" name="cities" id="cities" data-rel="selectscity">
</select>
JS code
$('[data-rel="selectscity"]').select2({
placeholderOption: 'first',
minimumInputLength: 2,
ajax: {
dataType: "json",
url: "getcities.cfm",
data: function (term, page) {
return {q: term};
},
results: function (data) {
return {results: data};
}
},
formatResult: formatValues,
nextSearchTerm: displayCurrentValue,
});
function displayCurrentValue(selectedObject, currentSearchTerm) {
return currentSearchTerm;
}
function formatValues(data) {
return data.city + ' - ' + data.state;
}
Hete is the JSON response I receive
[{"state":"Alaska","id":622,"city":"Anaktuvuk Pass"},{"state":"Alaska","id":1141,"city":"Atqasuk"},{"state":"Alaska","id":7176,"city":"Douglas"},{"state":"Alaska","id":8783,"city":"False Pass"},{"state":"Alaska","id":13511,"city":"Kasigluk"},{"state":"Alaska","id":13512,"city":"Kasilof"},{"state":"Alaska","id":17831,"city":"Moose Pass"},{"state":"Alaska","id":27034,"city":"Unalaska"},{"state":"Alaska","id":27984,"city":"Wasilla"},{"state":"Alabama","id":205,"city":"Alabaster"},{"state":"Alabama","id":1014,"city":"Ashford"},{"state":"Alabama","id":1020,"city":"Ashland"},{"state":"Alabama","id":1055,"city":"Ashville"},{"state":"Alabama","id":4291,"city":"Castleberry"},{"state":"Alabama","id":7177,"city":"Douglas"},{"state":"Alabama","id":7724,"city":"East Tallassee"},{"state":"Alabama","id":7748,"city":"Eastaboga"},{"state":"Alabama","id":13172,"city":"Jasper"},{"state":"Alabama","id":13487,"city":"Kansas"},{"state":"Alabama","id":18629,"city":"New Castle"},{"state":"Alabama","id":19409,"city":"Notasulga"},{"state":"Alabama","id":21213,"city":"Pleasant Grove"},{"state":"Alabama","id":24547,"city":"Silas"},{"state":"Alabama","id":26111,"city":"Tallassee"},{"state":"Alabama","id":26366,"city":"Thomaston"},{"state":"Alabama","id":26372,"city":"Thomasville"},{"state":"Arkansas","id":884,"city":"Arkansas City"},{"state":"Arkansas","id":994,"city":"Ash Flat"},{"state":"Arkansas","id":1006,"city":"Ashdown"},{"state":"Arkansas","id":1600,"city":"Bassett"},{"state":"Arkansas","id":4215,"city":"Casa"},{"state":"Arkansas","id":4238,"city":"Cash"},{"state":"Arkansas","id":4258,"city":"Casscoe"},{"state":"Arkansas","id":6459,"city":"Damascus"},{"state":"Arkansas","id":7257,"city":"Drasco"},{"state":"Arkansas","id":7369,"city":"Dumas"},{"state":"Arkansas","id":7971,"city":"El Paso"},{"state":"Arkansas","id":9940,"city":"Gassville"},{"state":"Arkansas","id":11615,"city":"Hasty"},{"state":"Arkansas","id":12175,"city":"Hiwasse"},{"state":"Arkansas","id":13173,"city":"Jasper"},{"state":"Arkansas","id":15224,"city":"Little Rock Air Force Base"},{"state":"Arkansas","id":16627,"city":"Mc Caskill"},{"state":"Arkansas","id":18102,"city":"Mount Pleasant"},{"state":"Arkansas","id":18405,"city":"Nashville"},{"state":"Arkansas","id":21214,"city":"Pleasant Grove"},{"state":"Arkansas","id":21232,"city":"Pleasant Plains"},{"state":"Arkansas","id":21295,"city":"Pocahontas"},{"state":"Arkansas","id":26705,"city":"Traskwood"},{"state":"Arkansas","id":27592,"city":"Wabash"},{"state":"Arkansas","id":27597,"city":"Wabbaseka"},{"state":"Arkansas","id":27942,"city":"Washington"},{"state":"Arizona","id":995,"city":"Ash Fork"},{"state":"Arizona","id":3659,"city":"Bylas"},{"state":"Arizona","id":4217,"city":"Casa Grande"},{"state":"Arizona","id":4240,"city":"Cashion"},{"state":"Arizona","id":7178,"city":"Douglas"},{"state":"Arizona","id":9371,"city":"Fort Thomas"},{"state":"Arizona","id":14291,"city":"Lake Havasu City"},{"state":"Arizona","id":23836,"city":"Sasabe"},{"state":"Arizona","id":26604,"city":"Tonto Basin"},{"state":"California","id":510,"city":"Alturas"},{"state":"California","id":950,"city":"Aromas"},{"state":"California","id":1078,"city":"Atascadero"},{"state":"California","id":1599,"city":"Bass Lake"},{"state":"California","id":2639,"city":"Bolinas"},{"state":"California","id":3720,"city":"Calabasas"},{"state":"California","id":4245,"city":"Casmalia"},{"state":"California","id":4248,"city":"Caspar"},{"state":"California","id":4259,"city":"Cassel"},{"state":"California","id":4271,"city":"Castaic"},{"state":"California","id":4280,"city":"Castella"},{"state":"California","id":4301,"city":"Castro Valley"},{"state":"California","id":4302,"city":"Castroville"},{"state":"California","id":7186,"city":"Douglas City"},{"state":"California","id":7187,"city":"Douglas Flat"},{"state":"California","id":7648,"city":"East Irvine"},{"state":"California","id":8331,"city":"Encinitas"},{"state":"California","id":9938,"city":"Gasquet"},{"state":"California","id":10722,"city":"Grass Valley"},{"state":"California","id":11046,"city":"Guasti"},{"state":"California","id":14227,"city":"Lagunitas"},{"state":"California","id":14445,"city":"Lancaster"},{"state":"California","id":16201,"city":"March Air Reserve Base"},{"state":"California","id":17389,"city":"Milpitas"},{"state":"California","id":17548,"city":"Moccasin"},{"state":"California","id":18122,"city":"Mount Shasta"},{"state":"California","id":18185,"city":"Mountain Pass"},{"state":"California","id":18889,"city":"Newcastle"},{"state":"California","id":18958,"city":"Newport Coast"},{"state":"California","id":19010,"city":"Nicasio"},{"state":"California","id":20465,"city":"Pasadena"},{"state":"California","id":20471,"city":"Paskenta"},{"state":"California","id":20472,"city":"Paso Robles"},{"state":"California","id":21215,"city":"Pleasant Grove"},{"state":"California","id":21218,"city":"Pleasant Hill"},{"state":"California","id":21243,"city":"Pleasanton"},{"state":"California","id":21464,"city":"Port Hueneme Cbc Base"},{"state":"California","id":23557,"city":"Salinas"},{"state":"California","id":23614,"city":"San Andreas"}]
source to share
I'm not sure how you have Select2 working with parameters <select>
and ajax
. I tested the code you pasted and it throws the following javascript error:
Bug: "ajax" option is not allowed for Select2 when attaching to an element.
This is allowed if you replace <select>
with<input type='hidden' ... />
Now, to your problem undefined
: your json object has state
, city
and id
. By default, Select2 expects id
and text
.
You were able to use the correct keys when the options are displayed because you have defined formatValues
. However, you missed formatSelection
what the documentation says:
Function used to display the current selection.
So, you have to override this function when Select2 is bound to the input, for example:
$('[data-rel="selectscity"]').select2({
placeholderOption: 'first',
minimumInputLength: 2,
ajax: {
dataType: "json",
url: "tags",
data: function (term, page) {
return {q: term};
},
results: function (data) {
return {results: data};
}
},
formatResult: formatValues,
nextSearchTerm: displayCurrentValue,
// use this function to display the value that you want
formatSelection: function(object, container) {
return object.city;
}
});
source to share