I am using select2
and I am a bit of newbie with this library.
I have a page where my select2 input should set to 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 can't figure out how to set the default value of the input. I have looked at this solution but still couldn't get it to work. Any help please?
working solution
thanks to the john here 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') });
}
});
I am using select2
and I am a bit of newbie with this library.
I have a page where my select2 input should set to 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 can't figure out how to set the default value of the input. I have looked at this solution but still couldn't get it to work. Any help please?
working solution
thanks to the john here 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') });
}
});
Share
Improve this question
edited May 23, 2017 at 12:00
CommunityBot
11 silver badge
asked Dec 15, 2014 at 23:12
mikeymikey
1,4606 gold badges26 silver badges48 bronze badges
1
- @Veve I know i even put the link to that answer in my question, my problem is that despite that solution I still can't manage to get a solution. I wanted to see if someone out there could lend me a hand.Still working on it... – mikey Commented Dec 15, 2014 at 23:39
1 Answer
Reset to default 7I think the reason the code you show does not work is that you are paring the id
property of the objects in the dataArray
to the value
of the input, but the value
of the input is a country name, not a country ID.
You should set the value
of the input to the country's ID, not its name.
Then you could avoid using the dataArray
and use:
initSelection: function(element, callback) {
callback({ id: element.val(), text: element.attr('data-init-text') });
}
This takes the id
from the value
of the input and the text
from the data-init-text
attribute of the input.
jsfiddle