向 selected.js 添加选项答案

【问题标题】：Adding options to chosen.js向 selected.js 添加选项
【发布时间】：2021-07-09 22:32:18
【问题描述】：

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

我在做什么：

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

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

一系列步骤将我带到<option>s 的数组。这个数组叫做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]);
}

稍后，我激活了 selected.js：

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

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

编辑：一些截图：

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

【问题讨论】：

宽度没有变成400px吗？这里有什么帮助吗？ stackoverflow.com/q/28308103/3825777 stackoverflow.com/questions/20091481/…使用jquery-chosen有什么好处？
@Henry Ecker 宽度确实在变化，这只会增加混乱。
我不认为你打算 ping 我。我刚刚修复了 HTML 代码块上的语法突出显示。你的意思是回复@jqueryHtmlCSS 吗？
是的，我很抱歉——正在查看我手机上的编辑/cmets。
生成的 HTML 是什么样子的？

标签： javascript jquery jquery-chosen

【解决方案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 的字符串数组。）这完全按照我的需要添加了所有选项。我希望其他人会觉得这很有用。

【讨论】：