Create Remote Select2 v4 Option with custom parameters - jquery-select2-4

Question

here is the problem, I can create the custom option as specify on documentation like this:
var option = new Option("my custom option", "myid", true, true);
$('select[name="myselect"]').append(option).trigger('change');
// manually trigger the `select2:select` event
$('select[name="myselect"]').trigger({
type: 'select2:select',
params: {
data: {
id: "myid",
text: "my custom option",
customparam: {
hello: "I'm here"
}
}
}
});
So, this creates the option normally and shows on select2 as selected as expected, this also trigger the select2:select event and I can read the extra parameter when this event is trigger, but here comes the problem, I can NOT access the extra parameter by doing this:
$('select[name="myselect"]').select2('data')[0].customparam
it's like the custom parameter is not attached to the element and it was only pass to the events.

Answer 1

for all who try to find an solution to add the custom parameters back on remote select2, here is what I did and worked perfectly:
$('select[name="yourfieldname"]')
.append(new Option(`${doc.n}`, doc._id, true, true))
.select2('data')[0].customparam = doc.i;
then just when you need call:
$('select[name="yourfieldname"]').select2('data')[0].customparam

Answer 2

The method described by #rafaelrglima's works for me, but I prefer the method below, which was gleaned from dejan9393's answer in Github issue 2830:
var dataAdapter = $('select[name="myselect"]').data('select2').dataAdapter;
dataAdapter.addOptions(dataAdapter.convertToOptions([{
id: "myid",
text: "mycustomoption",
customparam: "hello"
}]));
I prefer this way because I don't have to have one step for adding "id" and "text" and separate step for adding custom parameters. Also convertToOptions takes an array, so you have a convenient way to add multiple options in one step.