没有选项<select>从 JS 动态填充时的下拉列表

Question

Image of empty list

Showing populated options within inspector

I dynamically add options through a JS file based on the DB items. They sometimes populate when I CTRL+SHIFT+R hard refresh the page but not every time.

They never populate when I do a regular refresh (ctrl+r).

I am genuinely so confused how the options could be populated inside the inspector but not actually visible..

The JS is also surrounded with $(document).ready(function ()) so to my knowledge it only runs once the page is ready.

Function where I populate one of the dropdowns

function renderEndUseDropdown()
    {
        var endUseList = new Set(filteredProductList.map((element) => element.endUse));
        var endUse = Array.from(endUseList);
        var endUseSelection = document.getElementById("processname"); 
        for(var i = 0; i < endUse.length; i++)
        {
            if(endUse[i] !== '')
            {
                var option = endUse[i];
                var displayElement = document.createElement("option");
                displayElement.textContent = option;
                displayElement.value = option;
                endUseSelection.add(displayElement);
            }
        }
    }

The above code would be adding options to this block of HTML

<div class="col-xs-12 col-sm-6 col-md-2">
                                <select class="selectpicker" multiple="multiple" data-live-search="true"  title="End Use"   id="processname" multiple data-actions-box="true">

                                </select>
                            </div>

Answer 1

Since you are using bootstrap-select, this needs to be done.

So your function could be updated like below.

    function renderEndUseDropdown()
    {
        var endUseList = new Set(filteredProductList.map((element) => element.endUse));
        var endUse = Array.from(endUseList);
        var endUseSelection = document.getElementById("processname"); 
        for(var i = 0; i < endUse.length; i++)
        {
            if(endUse[i] !== '')
            {
                var option = endUse[i];
                var displayElement = document.createElement("option");
                displayElement.textContent = option;
                displayElement.value = option;
                endUseSelection.add(displayElement);
            }
        }
        $('#processname').selectpicker('refresh');
    }