如何通过代码设置Choices-js自定义选择框的选中值？

问题原因 #

Choices.js会隐藏原生<select>元素，基于它渲染一套自定义UI组件。直接修改原生select的value或触发change事件，只会更新原生元素的数据，但无法同步到Choices生成的界面，所以看起来设置无效。

解决方案 #

必须使用Choices.js官方提供的API来操作选中状态，常用的两个方法：

• setChoiceByValue(value)：根据选项的value值设置选中项
• setValue(value)：设置单个或多个选中值（支持传入数组）

修改后的完整代码 #

JavaScript

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

// 创建Choices实例并绑定到对应的select元素上，方便后续调用
const choicesInstance = new Choices(choicesSel, {
  searchEnabled: false
});
choicesSel.choicesInstance = choicesInstance;

document.addEventListener('click', function(e) {
  if (e.target.tagName === 'BUTTON') {
    const selectEle = e.target.closest('.container').querySelector('select');
    const targetValue = 'ipsum';
    
    if (selectEle.choicesInstance) {
      // 处理Choices生成的select
      selectEle.choicesInstance.setChoiceByValue(targetValue);
      // 手动触发change事件（如果需要监听该事件的回调）
      selectEle.choicesInstance.trigger('change');
    } else {
      // 处理原生select
      selectEle.value = targetValue;
      selectEle.dispatchEvent(new Event('change'));
    }
  }
});

CSS

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

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

HTML（修正拼写错误：valule改为value）

<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 value="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 value="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>

说明 #

• 将Choices实例绑定到对应的select元素的自定义属性choicesInstance上，是为了在点击事件中快速识别并调用API；
• 使用setChoiceByValue方法可以精准匹配选项的value值设置选中状态，同时会自动同步Choices的UI显示；
• 如果需要触发Choices的change事件回调，可以调用trigger('change')方法。

内容的提问来源于stack exchange，提问作者user13286