添加选项 chosen.js

Question

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

我在做什么：

我有几个 <select> 看起来或多或少像这样：

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

一系列步骤让我得到一个 <option> 数组。这个数组叫做 optnames.
我遍历数组，将其添加到几个 <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]);
}

一段距离后，我激活chosen.js:

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

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

编辑：一些截图：

搜索框。它们的大小正确为 400 像素。
单击其中一个文本框。我在这里手动添加了一个虚拟选项。

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。）这完全按照我的需要添加了所有选项。我希望其他人会觉得这很有用。

添加选项 chosen.js

Adding options to chosen.js

javascript

jquery

jquery-chosen