沒有選項<select>從 JS 動態填充時的下拉列表

Question

空列表的圖像

在檢查器中顯示填充的選項

我通過基於數據庫項的 JS 文件動態添加選項。 當我 CTRL+SHIFT+R 硬刷新頁面時，它們有時會填充，但不是每次都填充。

當我定期刷新 (ctrl+r) 時，它們永遠不會填充。

我真的很困惑如何在檢查器中填充選項但實際上不可見..

JS 也被 $(document).ready(function ()) 包圍，所以據我所知它只在頁面准備好后運行。

我填充下拉菜單之一的功能

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);
            }
        }
    }

上面的代碼將向這個 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

由於您使用的是 bootstrap-select， 因此需要完成此操作。

所以你的函數可以像下面這樣更新。

    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');
    }