使用jQuery Multiselect插件创建动态下拉框的选项添加问题

看起来你代码里的核心问题是变量使用错误，导致你只在下拉框里添加了单个字符，而不是整个lines数组的选项。另外还有初始化顺序和重复操作的小问题，我帮你一步步修正：

问题根源分析 #

1. 变量赋值错误：你写了firstLine = lines[0];，这里lines[0]是字符串"B"，所以循环firstLine.length其实是1（单个字符的长度为1），只会添加一个选项"B"，而不是遍历整个lines数组。
2. 原生JS代码冗余：你同时使用了appendChild和insertBefore，这两个操作重复了，保留一个即可。
3. 插件初始化顺序问题：如果先初始化multiselect插件再添加选项，需要正确调用refresh方法，但更稳妥的逻辑是先添加所有选项，再初始化插件。

修正后的jQuery实现方案 #

<select multiple id="select1">
  <option value="A">A</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiselect/2.2.9/js/multiselect.min.js"></script>
<script>
const lines = ["B","C","D","E","F","G"];

$(document).ready(function(){
  // 先批量添加所有选项到原生select
  lines.forEach(item => {
    jQuery('<option/>', { 
      value: item, 
      text: item // 纯文本内容用text而非html，更安全
    }).appendTo('#select1');
  });
  
  // 再初始化multiselect插件
  $("#select1").multiselect({ 
    placeholder: 'Features' 
  });
});
</script>

修正后的原生JavaScript实现方案 #

<select multiple id="select1">
  <option value="A">A</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiselect/2.2.9/js/multiselect.min.js"></script>
<script>
const lines = ["B","C","D","E","F","G"];

document.addEventListener('DOMContentLoaded', function(){
  const selectFir = document.getElementById("select1");
  
  // 遍历数组添加选项
  lines.forEach(item => {
    const option = document.createElement("OPTION");
    option.textContent = item;
    option.value = item;
    selectFir.appendChild(option);
  });
  
  // 初始化multiselect插件
  $("#select1").multiselect({ 
    placeholder: 'Features' 
  });
});
</script>

额外注意事项 #

• 如果因业务需求必须先初始化插件再添加选项，需确保在所有选项添加完成后调用$('#select1').multiselect('refresh');，但这种方式不如先加选项再初始化可靠。
• 避免变量名混乱：你之前定义的firstLine完全多余，直接遍历lines数组即可。
• 优先使用textContent（原生JS）或text（jQuery）设置选项文本，比html更安全，可避免潜在的XSS风险。

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