Choices.js结合Angular.js实现select下拉框选项动态填充问题求助

API 探路者

2026-9-24

问题原因

Choices.js初始化时会将原生<select>元素重写为自定义DOM结构，后续Angular.js通过ng-repeat更新原生<option>时，Choices.js无法监听到变动，不会同步渲染新选项，因此填充功能失效。

解决方法

不要提前初始化Choices.js，等Angular.js拿到AJAX数据、完成DOM渲染后再初始化，后续数据更新时直接调用Choices.js提供的API刷新选项即可。

1. 修改HTML代码

去掉<select>标签的choices类，移除<option>上多余的selected='selected'属性：

<label for="docno" class="col-form-label">Name :</label>
<select id='docno' class="form-select" ng-model="docno" ng-change='getDocs()' required="true">
  <option ng-repeat="d in documents" ng-value="d.docno">{{d.name}}</option>
</select>

2. 修改Angular.js控制器逻辑

将$timeout依赖注入你的控制器，在AJAX请求拿到数据后延迟执行Choices.js的初始化/更新逻辑：

// 存储Choices实例
let choicesInstance = null;

// 你的AJAX请求逻辑示例
$http.get('你的数据接口地址').then(function(response) {
  $scope.documents = response.data;
  
  // 等待Angular完成ng-repeat的DOM渲染
  $timeout(function() {
    const selectDom = document.getElementById('docno');
    if (choicesInstance) {
      // 已初始化过，直接更新选项
      choicesInstance.setChoices(
        $scope.documents.map(item => ({
          value: item.docno,
          label: item.name
        })),
        'value',
        'label',
        true // 清空原有选项再插入新选项
      );
    } else {
      // 首次初始化，可根据需求配置参数
      choicesInstance = new Choices(selectDom, {
        searchEnabled: true, // 开启搜索
        removeItemButton: true, // 多选时显示删除按钮
        // multiple: true 开启多选
      });
    }
  }, 0);
});