使用多选jquery插件创建动态下拉框时出现问题

Question

我正在尝试进行动态选择下拉菜单，我尝试同时在javascript和jquery中编写代码，但无法在下拉菜单中附加选项。当我尝试查看存储的内容时，将显示HTML选择代码以及所有选项。我应该在其中添加或更改什么，以便将选项存储在正确的位置？

lines=["B","C","D","E","F","G"];
$(document).ready(function(){
  $("#select1").multiselect({
    placeholder: 'Features'
  });
});    

   // var selectFir = document.getElementById("select1");
      
   // for (var i = 0; i < firstLine.length; i++) {
         // var x = document.createElement("OPTION"), 
           //     txt = document.createTextNode(firstLine[i]);
          // x.appendChild(txt);
          //  x.setAttribute("value", firstLine[i]);
          //  selectFir.appendChild(x);
          //  selectFir.insertBefore(x, selectFir.lastChild);
   //  }console.log(selectFir);

firstLine = lines[0];
// Calls function to generate drop downs using options above
       for(var i=0; i< firstLine.length;i++)
       {
        //creates option tag
         jQuery('<option/>', {
               value: firstLine[i],
               html: firstLine[i]
               }).appendTo('#select1'); 
       }
       jQuery('#select1').multiselect('refresh');

<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>
<select multiple id="select1">
 <option value="A">A</option>
</select>

Answer 1

lines=["B","C","D","E","F","G"];
$(document).ready(function(){
  $("#select1").multiselect({
    placeholder: 'Features'
  });
});    

   // var selectFir = document.getElementById("select1");
      
   // for (var i = 0; i < firstLine.length; i++) {
         // var x = document.createElement("OPTION"), 
           //     txt = document.createTextNode(firstLine[i]);
          // x.appendChild(txt);
          //  x.setAttribute("value", firstLine[i]);
          //  selectFir.appendChild(x);
          //  selectFir.insertBefore(x, selectFir.lastChild);
   //  }console.log(selectFir);

firstLine = lines;
// Calls function to generate drop downs using options above
       for(var i=0; i< firstLine .length;i++)
       {
        //creates option tag
         jQuery('<option/>', {
               value: firstLine[i],
               html: firstLine[i]
               }).appendTo('#select1'); 
       }
       jQuery('#select1').multiselect('refresh');

<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>
<select multiple id="select1">
 <option value="A">A</option>
</select>