Adding options to chosen.js

Question

I've been having some trouble adding options to a chart.js <select> from an array of <option>s. I used the same rough procedure all the time, so I'm not sure why it's failing me now...

What I'm doing:

I have several <select>s which look more or less like this:

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

A sequence of steps that gets me to an array of <option>s. This array is called optnames.
I iterate through the array, adding it to several <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]);
}

Some distance later, I activate chosen.js:

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

I made sure to include all relevant files and plugins in <script> tags. I've also console.log()ed optnames to make sure the array is what I expect it to be. The several other pages on this very topic propose good solutions -- none work. Any thoughts as to what the error could be?

EDIT: some screenshots:

The search boxes. They are correctly sized to 400px.
Clicking one of the text boxes. I added a dummy option manually here.

Is the width not changing to 400px? Is anything here helpful? https://stackoverflow.com/q/28308103/3825777 https://stackoverflow.com/questions/20091481/auto-resizing-the-select-element-according-to-selected-options-width What's the benefit of using jquery-chosen? — react_or_angluar, Jul 09 '21 at 22:48
@Henry Ecker The width is indeed changing, which only adds to the confusion. — bsp2121, Jul 10 '21 at 15:08
I don't think you meant to ping me. I just fixed the Syntax highlighting on the HTML code block. Did you mean to respond to @jqueryHtmlCSS ? — Henry Ecker, Jul 10 '21 at 15:24
Yes, my apologies -- was viewing the edits/comments on my phone. — bsp2121, Jul 10 '21 at 15:43

score 0 · Accepted Answer · answered Jul 12 '21 at 16:44

I managed to figure out what was going wrong. I was mixing jQuery and JavaScript (something I'm in the bad bad habit of doing rather often). I've now written the code such that it is all 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 is the array of strings from which I was originally building optnames.) This added all the options exactly as I wanted them. I hope others may find this useful.

Adding options to chosen.js

1 Answers1