admin管理员组文章数量:1326303
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
本文标签: javascriptSet default value of select2 inputStack Overflow
版权声明:本文标题:javascript - Set default value of select2 input - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742206297a2432875.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论