Choices: How to change value of existing Choice?

[morphikus]

I have the existing element select#selector

I can't change developer's src bundle.
I just need add my fuctionality.

I'd like to do

var selector = new Choices(document.getElementById('selector'));
selector.setValue('bla-bla');

but it doesn't work.

Can you help me?

[jshjohnson]

Hey! setValueByChoice is what you’re after! :)

[morphikus]

When I call setValueByChoice I see "Attempting to select choice that does not exist" in console log.

I don't need to create a Choice combobox =) I want use the existing Choice combobox.

[jshjohnson]

What are you passing as the argument to setValueByChoice? You need to pass the value of the option you want to select.

[morphikus]

For example:

select id="select"
option value="123"
One two three
option value="456"
Four Five Six

Somebody had done the Choice element from select#select earlier.

I'm trying to "connect" to his Choice element
var selector = new Choices(document.getElementById('select')); selector.setValueByChoice('456');
but I see "Attempting to select choice that does not exist" in console log. =))

[jshjohnson]

Could you do me a favour and send me the output of console.log(selector.presetChoices) please?

Thanks

[morphikus]

=(

[jshjohnson]

Hmm something's not right with your setup. Could you send me your full choices config as well as the markup for the select please?

[morphikus]

if (document.querySelector('.js-choice')) {
  Array.from(document.querySelectorAll('.js-choice')).forEach(
    element => new Choices(element, {
      search: false,
      itemSelectText: '',
      shouldSort: false
    }));
}

So every select at site will become Choice element. I can't change config. I need to work with the existing elements. =(

[jshjohnson]

So are you trying to set the value on every single select box? I'm confused

[sergonius]

I have a similar issue. I am making every select on the page into a Choices instance so I don't really have access to the specific one I want to set the value of (via a separate instance variable).

Choices in my case is inside a wrapper:

const Select = (selector = 'select:not(.js-manual-select)', settings = {}) => {
    if (!document.querySelector(selector)) {
        return console.warn('Select: no matching element');
    }

    return new Choices(selector, merge(defaultSettings, settings));
};

Since I have access to code, I excluded a certain class as seen above and created an instance separately.
This did give me an error in the console saying Incompatible input passed, which seemingly doesn't really affect anything, everything works. (Care to still comment this, though?)

Listening to select changes and setting the new value as the Choices instance value of the select would solve @morphikus and my issue I guess. A possibility to retrieve the instance via an HTML element etc would work as well.

[bennybee]

I have the same issue, I'm creating many instances of Choices on page init. I don't have access to each choices instance as a variable to update later so would like to target via the source DOM element e.g.

var elChoice = document.querySelector('.choices-instance');
var choicesInstance = Choices(elChoice);
choicesInstance.setValue(['Set value 1', 'Set value 2']);

[jshjohnson]

This is fixed in develop - soon to be released. Just writing some e2e tests...

[binarious]

@jshjohnson Any ETA? Having this issue with 4.1.0.

[carlwood]

@jshjohnson Having the same issue.

[besciualex]

<!-- Let's assume we have a select like this: -->
<select name="test" id="test">
<option value="1">One</option>
<option value="2">Two</option>
</select>

//convert all selects on the page in Choices
document.getElementsByTagName('select').forEach(function(current_node, index){
// create a new property on it, which will store Choices
current_node.choices = new Choices(node);
})

// Access it anytime using the property declared earlier
document.getElementById('test').choices.setValue([{value: 2, label: "Two"}])