Choices-js - programmatically change the selected value

Question

I am using Choices-js to create a custom select element. The user can either use the select dropdown or some buttons to select their choice. On click of the button, I would like for the select dropdown to automatically take the value that the button is passing. The way I normally do this with a standard select element, selectEle.value = 'val';, doesn't seem to be working. I tried to dispatch a change event to see if that might trigger the value to change, but that doesn't seem to work either.

const standardSel = document.getElementById('standard');
const choicesSel = document.getElementById('choices');

choices = new Choices(choicesSel, {
  searchEnabled: false
});

document.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let selectEle = e.target.closest('.container').querySelector('select');
    // Set the value of the select box
    selectEle.value = 'ipsum';
    
    // Trigger change event
    selectEle.dispatchEvent(new Event('change'));
  }
});

select, .choices {
  display:block;
  width:200px;
  margin-bottom:15px!important;
}
  .choices__inner {
    min-height:initial!important;
  }

.container {
  display:block;
  margin-top:30px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.2.0/choices.min.css">

<div class="container">
  <select id="standard">
    <option value="">--Select One--</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option valule="dolor">Dolor</option>
  </select>

  <button>Select "Ipsum"</button>
</div>

<div class="container">
  <select id="choices">
    <option value="">--Select One--</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option valule="dolor">Dolor</option>
  </select>

  <button>Select "Ipsum"</button>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.2.0/choices.min.js"></script>

Answer 1

You have to reference the choice's variable and not the select itself.

Then you can use setValue or setChoiceByValue on that object.

setValue has to be an array of something but setChoiceByValue can be the string itself. gitHub docs

choices.setValue(['ipsum']);

or

choices.setChoiceByValue('ipsum');

I also made a tweak to the variables, so that you could easily use it on multiple selects.

const standardSel = document.getElementById('standard');
const choicesSel = document.getElementById('choices');

const choiceSelects = {
  "choices" : new Choices(choicesSel, {searchEnabled: false}),
  "standard" : new Choices(standardSel, {searchEnabled: false})
};

document.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let selectEle = e.target.closest('.container').querySelector('select');
    
    //choices.setValue(['ipsum']); or
    choiceSelects[selectEle.id].setChoiceByValue('ipsum');
  }
});

select, .choices {
  display:block;
  width:200px;
  margin-bottom:15px!important;
}
  .choices__inner {
    min-height:initial!important;
  }

.container {
  display:block;
  margin-top:30px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.2.0/choices.min.css">

<div class="container">
  <select id="standard">
    <option value="">--Select One--</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option valule="dolor">Dolor</option>
  </select>

  <button>Select "Ipsum"</button>
</div>

<div class="container">
  <select id="choices">
    <option value="">--Select One--</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option valule="dolor">Dolor</option>
  </select>

  <button>Select "Ipsum"</button>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.2.0/choices.min.js"></script>