Set selected option when using a remote source

[nusoft]

I'm loading options from a remote source, like this example: https://tom-select.js.org/examples/remote/

It's working fine, however, I'm not able to set a default selected option.

I tried to add the items: [1] option, both with the value as the name of the option that should be selected (items['Amsterdam']). But that only works when I add static options instead of from a remote source. I also tried to preload the data.

Is there a solution for this?

[oyejorge]

But that only works when I add static options instead of from a remote source

That is one of the solutions. Tom Select needs an option to exist for the value set in items. You don't have to add all of the options statically, just the one(s) that relate to the default selected option.

The other approach is the set the default selected option (using the setValue() method) right after the options are loaded dynamically.

[mholt]

For anyone else looking for a way to set the default values from a remote source, here's my solution, it's quite easy actually: #240 (comment)

[nkokkos]

When you initialize the control right before you edit the data, provide two arrays for the options and the items parameters.

For example, load from the database your selected options:

eg.

selected_options = [{"id":65001,"first_name":"Charleen"},{"id":65002,"first_name":"Mack"}]

and then you have to tell the control to select the options:

selected_items = [65001, 65002]

Make sure you have the following correct when you initialize the control:

valueField: 'id',
labelField: 'first_name',
searchField: ['first_name'],
options: selected_options,
items: selected_items,

This is an example from my test app editing a record. I have 2 select boxes. On the second I select the options and on the first (tomselect) I add the selected values. I did it so in order to see how I can pass the values to tomselect and it worked.:

[ahmed-bhs]

@nkokkos , imagine you have a JavaScript element. Do you have any idea how to pass these selected elements?

[mpavesta2000]

✅ Best working solution

        window.addEventListener('load', () => {
            var oldValues = ["4","7","8"];
            document.querySelector('#required_specs').tomselect.setValue(oldValues);
        });

this is how we can do this, only pass default ids and tomSelect will handle the rest. all action after this is working correctly.