Dynamically add an item.

[diegolaz79]

I need to dynamically add items to a select (choice).

obj = jsonListOptions();
let select = new Choices($('#selProfesional')[0]); //==> Here I have the instance.
$.each(obj, function(key,value) {
	//This addItem gives error.... is there an addItem method??
	select.addItem(value.id, value.nombre + " " + value.apellido);

       //This option adds values to the inner select, but the "visible" options seem empty
	//$('#selProfesional').append('<option value="'+ value.id + '">' + value.nombre + " " + value.apellido + '</option>');
}); 

Thanks!!

[diegolaz79]

Not working either...

$.each(obj, function(key,value) {
	selUsuario.setChoices([{ value: value.id, label: value.nombre + " " + value.apellido, disabled: true }],'value','label',false,);
}); 

[diegolaz79]

using default sample mode gives error also...

selUsuario.setChoices(
		[
	{ value: 'One', label: 'Label One', disabled: true },
	{ value: 'Two', label: 'Label Two', selected: true },
	{ value: 'Three', label: 'Label Three' },
		],
		'value',
		'label',
		false,
);

ERROR:

Uncaught TypeError: this.containerOuter is undefined
setChoices ...choices.min.js:2
success ...main.js:26
jQuery 6
...main.js:10
jQuery 13
choices.min.js:2:24453

[FahriDevZ]

Its work fine for me.

this example using version 9.0.1 :
https://jsbin.com/celocifevo/edit?js,output

[d-packs]

@FahriDevZ this does not make sense.
if you already have an array of objects containting the options you need, what's the need for that convoluted way?
Actually let's say I have this array

var options = [{ value: 'One', label: 'Label One', disabled: true },
 { value: 'Two', label: 'Label Two', selected: true }]

Can you show how to adapt your code for use with this? I can't wrap my head around that promise paradigm.

The documentation states that this is how you do it:

selUsuario.setChoices(
		[
	{ value: 'One', label: 'Label One', disabled: true },
	{ value: 'Two', label: 'Label Two', selected: true },
	{ value: 'Three', label: 'Label Three' },
		],
		'value',
		'label',
		false,
);

however I get the same result as @diegolaz79. It looks like a bug. @diegolaz79 maybe it would be useful to add the bug tag to this issue.

[paulocardozo]

I tried to do it, but without success. I resolved to use select2, then I've created a Choices like style to select2 plugin, you can check here github

[nmauludina]

have you check demo page and it's source code?

I was get the same error as

but after i test

Choices/public/index.html

Lines 324 to 330 in 5dbea28

	<select
	class="form-control"
	name="choices-single-remote-fetch"
	id="choices-single-remote-fetch"
	>
	<option value="">Pick an Arctic Monkeys' record</option>
	</select>

and copy-paste the js code

Choices/public/index.html

Lines 707 to 723 in 5dbea28

	var singleFetch = new Choices('#choices-single-remote-fetch', {
	allowHTML: false,
	searchPlaceholderValue: 'Search for an Arctic Monkeys record',
	})
	.setChoices(function() {
	return fetch(
	'https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW'
	)
	.then(function(response) {
	return response.json();
	})
	.then(function(data) {
	return data.releases.map(function(release) {
	return { label: release.title, value: release.title };
	});
	});
	})

IT WORKS! 🎉

this what you should do:
If you use default single select, use that same select tag with attribute id, name and class ="form-control", but removedata-trigger attribute.

Tell me if somebody find it works!

[sequencerr]

same problem, no clue