动态创建的select字段无法加载for循环数据，“添加更多”功能异常求助

我能正常查看页面上通过模板循环生成的组件列表，但点击“添加更多”用JS动态创建select字段时，新字段里没有加载任何组件数据，这是什么原因？

正常加载数据的select（模板代码） #

通过模板引擎for循环渲染的select：

<select name="component" data-live-search="true" id="component" class="form-control" title="Dropdown field">
         {% for i in component %} 
         <option value="{{i.id}}">{{i.name}}</option>
         {% endfor %}
</select>

页面渲染后的实际HTML： #

<select name="component" data-live-search="true" id="component" class="form-control" title="Dropdown field">
          
         <option value="2">test2</option>
          
         <option value="3">sdf</option>
          
         <option value="4">qwerty</option>
          
         <option value="5">qwerty</option>
          
         <option value="6">example</option>
</select>

动态创建select的JS代码 #

我用原生JS动态创建字段的代码：

var field = document.createElement('select');
field.setAttribute('name','component');
field.setAttribute('data-live-search','true');
field.setAttribute('id','component');
field.setAttribute('class','form-control');
field.setAttribute('title','Dropdown field');
survey_options.appendChild(field);

页面渲染后的实际HTML： #

<select name="component" data-live-search="true" id="component" class="form-control" title="Dropdown field"></select>

原因分析与解决方法 #

核心原因 #

模板引擎的{% for %}循环是服务端渲染阶段完成的，会在页面返回给浏览器前就把<option>标签生成好。而你用JS动态创建select是浏览器端运行的操作，此时模板引擎已经停止工作，不会自动帮你生成选项。

解决步骤 #

1. 提前获取组件数据：在页面初始化时，把服务端的component数据注入到全局JS中，比如通过模板引擎转成JS对象：

<script>
// 将服务端数据转为JS可操作的对象
const componentList = {{ component | tojson }};
</script>

2. 手动生成option标签：创建完select元素后，遍历componentList动态生成<option>并添加到select中：

var field = document.createElement('select');
// 设置基础属性（注意不要重复使用同一个id，页面id必须唯一）
field.setAttribute('name','component');
field.setAttribute('data-live-search','true');
field.setAttribute('class','form-control');
field.setAttribute('title','Dropdown field');

// 遍历数据生成选项
componentList.forEach(item => {
  const option = document.createElement('option');
  option.value = item.id;
  option.textContent = item.name;
  field.appendChild(option);
});

survey_options.appendChild(field);

3. 关键注意点：动态创建的多个select不能共用同一个id="component"，DOM中id必须唯一，否则会导致后续选择器操作出错。

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