Can we clear the selection in JavaScript?

[Gougoul]

I haven t found a way to do it programmatically...

Clear input clears the text but that’s it...

[avrtau]

I also found that the clearChoices() method does not reset to the initial state, i.e.: the placeholder is missing.

It's a hack, but this is how I did it for now:

    CHOICES_INSTANCE.clearChoices();
    document.querySelector("div.choices__item").innerHTML="Make your choice";
    document.querySelector("div.choices__item").setAttribute("data-value","Make your choice");
    document.querySelector("div.choices__item").setAttribute("data-id","1");
    document.querySelector("div.choices__item").classList.add("choices__placeholder");
    CHOICES_INSTANCE.setChoices({value: 'whatever', label: 'whatever'}, 'value', 'label', false);

If you have multiple instances, make sure that you are more specific with the document.querySelector().

[pavelloz]

Wait...

Are you saying that clearing selected values to have default state of the choices requires above hack?

This or destroy + clear selected + init of the whole thing?

To reset values?

I wish i knew that couple weeks ago...

[markbranly]

For anyone else who stumbles across this thread, you can use the removeActiveItems method.

[sulem]

For anyone else who stumbles across this thread, you can use the removeActiveItems method.

Thanks, it works like a charm!

[lmsantanam]

Hi, I was having problems clearing the select after a submit so, given that I haven't found a concise example on how to use removeActiveItems I ended up using the code on this link:

https://jsfiddle.net/pvvnxdementor5/og7yhu4t/42/

I added the clear button, give it an id (a class would work also) and on the function that handles the post success aftermath, I simulate a click to the clear button

document.getElementById("clearBtn").click()

So maybe this works for somebody else. I'm not an expert on JS and this library works awesome but I do find it really hard to find instructions on how to call methods after the select choice is created

[derickhoganpimenta]

Hello.

Taking advantage of this issue. Is there any way to unselect some items by passing an array of ids as a argument?

[gruawati]

Hello. I have a close problem with choices.js and form.reset. I change values in a mysql database and i am using ajax for it. Everything is fine an works. But some values have to be values from a list, so a select is the correct way for me, but the select list ist very long, so i need a "search" in this too. I tried choices.js and it work very fine in a modal (select2 or selcetize works in a modal not). But my problem is, if i press the button "add" or "change" to add or edit something, then i have to reset my form with form.reset, cause if not, then the values from before are still in the field. I know, it sounds complicated but i hope somebody can understand me. But if i reset my form, then the values of my choices select are empty and i can choose nothing. Can somebody help me how i can fix that? And by the "change value" i need the value, who is saved in database. Maybe somebody have a little jsfiddle or something where i see how to use "setchoices" and that it not crash when i reset with form.reset(). Btw, i know my english is not the best, sorry if somebody can't understand me.

[MrCordeiro]

For anyone else who stumbles across this thread, you can use the removeActiveItems method.

My problem with this answer is that it also removes the placeholder of a select-one:

<select>
  <option value="">This is a placeholder</option>
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

[kinsleykajiva]

hi, guys do resetting dynamically work at all? all of the options presented or on the documentation does not work at all. ranging from javascript choices1.clearChoices(); choices1.setChoices(tagsArr, "value", "label", false); // even creating a new instance do not work

[SDG1212]

hi, guys do resetting dynamically work at all? all of the options presented or on the documentation does not work at all. ranging from javascript choices1.clearChoices(); choices1.setChoices(tagsArr, "value", "label", false); // even creating a new instance do not work

I have the same issue when trying to use single select. Is it is what I'm doing wrong or it's a plugin mistake?

The way I have found how to solve a problem:

1. Call destroy method
2. Replace Select tag with the default one.
3. Call custom init function (not build-in Choices Plugin init function) with all parameters, events and etc again.

Below the code what I used and have found an issue.

HTML Code:

<select name="item_id">
  <option value="" disabled selected>Placeholder</option>
  <option value="1">Item #1</option>
  <option value="2">Item #2</option>
  <option value="3">Item #3</option>
</select>

JS Code for testing:

const choice = new Choices(element, {
  position: 'below',
  itemSelectText: '',
  shouldSort: false,
  searchPlaceholderValue: $(element).find('option[value=""]').text(),
  fuseOptions: {
    threshold: 0.0,
  },
});

element.addEventListener(
    'choice',
    function(event) {
      // How to reset selected options here correctly to default?
    },
    false,
  );
};

[SDG1212]

Oh, I have found a solution. If you use plugin methods in events then you need to put your plugin methods in setTimeout(). A great reminder to reread info about event loops!

[galievruslan]

clearChoices still doesn't work.

<button name="button" type="button" class="btn btn-secondary" data-action="click->check#clean"><i class="bi bi-eraser"></i> </button>

function clean(event) {
  let el = event.target.closest('form').querySelector('.form-select')
  let finded_choice_select = new Choices(el)
  finded_choice_select.clearChoices()
}

[nacholozano]

Any advance in this issue for select-one type? I want to change the options programatically. I'm using clearChoices() to remove old choices and setChoices() to add new ones but old selected value remains.

[nacholozano]

Any advance in this issue for select-one type? I want to change the options programatically. I'm using clearChoices() to remove old choices and setChoices() to add new ones but old selected value remains.

Nevermind, I just solved it:

1. clearChoices() to remove old choices
2. setChoices( newChoices ) to add new choices
3. setChoiceByValue( newChoices[0] ) to replace selected old choices with first new choice

[codernik]

I see that, there is one parameter which is accepted by the function removeActiveItems(excludedId: number). So if you are using placeholder, passing 0 or 1 as per the index should work.

[evdeveloper]

For anyone else who stumbles across this thread, you can use the removeActiveItems method.

My problem with this answer is that it also removes the placeholder of a select-one:

<select>
  <option value="">This is a placeholder</option>
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

Call the destroy() method first and then init()

const example = new Choices(element); example.destroy(); example.init();

[galievruslan]

For anyone else who stumbles across this thread, you can use the removeActiveItems method.

My problem with this answer is that it also removes the placeholder of a select-one:

<select>
  <option value="">This is a placeholder</option>
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

Call the destroy() method first and then init()

const example = new Choices(element); example.destroy(); example.init();

It's work for me. Thanks.