Set the default for select2 input
I use select2
and I am a bit new to this library. I have a page where my select2 element should set a default value if that value is posted. Here is the html
<!-- COUNTRY -->
<span id="agency_data">
<input type="hidden" name="country_id" id="filter_country" data-placeholder="Choose A Country Name" data-init-text="<?= isset($data['cty_name']) ? $data['cty_name'] : '' ?>" value="<?= isset($data['cty_name']) ? $data['cty_name'] : '' ?>" />
</span>
and this is my jQuery
//******** COUNTRY ********
if(typeof countryId === 'undefined') {
countryId = '';
}
if(typeof countryName === 'undefined') {
countryName = '';
}
var dataArray = [{id:countryId,text:countryName}];
$('#filter_country').select2({
minimumInputLength: 0,
allowClear: true,
ajax: {
url: base +"/agencyList/search",
dataType: 'json',
type: 'POST',
data: function (term, page) {
return {
country: term
};
},
results: function (data, page) {
return {
results: data
};
}
},
data:dataArray,
initSelection: function (element, callback) {
$(dataArray).each(function() {
if (this.id == element.val()) {
callback(this);
return
}
})
}
});
As I said, I cannot figure out how to set the default value for the input. I looked over this solution but still couldn't get it to work. Any help please?
working solution
thanks to john this is how i got it working: HTML:
<span id="agency_data">
<input type="hidden" name="ag_cty_id" id="filter_country" data-placeholder="Choose A Country Name" data-init-text="<?= isset($data['cty_name']) ? $data['cty_name'] : '' ?>" value="<?= isset($data['ag_cty_id']) ? $data['ag_cty_id'] : '' ?>" />
</span>
JQuery
$('#filter_country').select2({
minimumInputLength: 0,
allowClear: true,
ajax: {
url: base +"/agencyList/search",
dataType: 'json',
type: 'POST',
data: function (term, page) {
return {
country: term
};
},
results: function (data, page) {
return {
results: data
};
}
},
initSelection: function (element, callback) {
console.log('id elemt: ' + element.val());
callback({ id: element.val(), text: element.attr('data-init-text') });
}
});
source to share
I think the reason you are showing the code is not working is because you are comparing a property of the id
objects in dataArray
from the value
input, but the value
input is the country name, not the country id.
You have to set value
to enter the country ID, not its name.
Then you could avoid using dataArray
and use:
initSelection: function(element, callback) {
callback({ id: element.val(), text: element.attr('data-init-text') });
}
This takes in id
from value
input and text
from an attribute data-init-text
for input.
source to share