向 selected.js 添加选项

Question

我在从<option>的数组中向 chart.js <select>添加选项时遇到了一些麻烦。 我一直使用相同的粗略程序，所以我不知道为什么它现在让我失望......

我在做什么：

0. 我有几个<select>看起来或多或少是这样的：

<select id='soilname' data-placeholder='Type here' multiple class='chosen-select'>
    <option value=''></option>
</select>

1. 一系列步骤使我进入<option>数组。 该数组称为optnames 。
2. 我遍历数组，将它添加到几个<select> s：

for(var i=0; i < optnames.length; i++)
{
    document.getElementById("soilname").appendChild(optnames[i]);
    document.getElementById("soilyearname").appendChild(optnames[i]);
    document.getElementById("albedoname").appendChild(optnames[i]);
    document.getElementById("dcname").appendChild(optnames[i]);
    document.getElementById("acname").appendChild(optnames[i]);
}

3. 一段距离后，我激活了 selected.js：

jQuery(".chosen-select").chosen({
    width: "400px"
});

我确保在<script>标签中包含所有相关文件和插件。 我还使用了console.log() ed optnames以确保数组符合我的预期。 关于这个主题的其他几个页面提出了很好的解决方案 - 没有工作。 关于错误可能是什么的任何想法？

编辑：一些截图：

1. 搜索框。 它们的大小正确为 400 像素。

2. 单击文本框之一。 我在这里手动添加了一个虚拟选项。

Answer 1

我设法弄清楚出了什么问题。 我正在混合 jQuery 和 JavaScript（这是我经常做的坏习惯）。 我现在编写的代码都是 jQuery：

for(var i=0; i < mynames.length; i++)
{
    $('#soilname').append($("<option>"+mynames[i]+"</option>"));
    $('#soilyearname').append($("<option>"+mynames[i]+"</option>"));
    $('#albedoname').append($("<option>"+mynames[i]+"</option>"));
    $('#dcname').append($("<option>"+mynames[i]+"</option>"));
    $('#acname').append($("<option>"+mynames[i]+"</option>"));
}

（ mynames是我最初构建optnames的字符串数组。）这完全按照我的需要添加了所有选项。 我希望其他人可能会觉得这很有用。