隱藏空的 Select 點擊時下拉選項翻轉

Question

要減小頁面加載時的文檔大小，我會在單擊占位符 select 下拉菜單后加載我的 select 下拉菜單之一和 ajax 的選項，其中只有一個選項用作占位符。

不幸的是，select 框在通過 ajax 被新的下拉列表替換之前顯示了一個小的空白 select 選項字段（參見下面的 GIF）。看起來像默認的瀏覽器行為。

我無法禁用 select 框，因為點擊事件不起作用。 知道如何解決這個問題嗎？

    // Placeholder DIV
    <div id="testdiv">
        <label>Abholort</label>                                     
        <select autocomplete="off" id="testplaceholder">  
            <option value='0'>Suchen</option>                                   
        </select>
    </div>


    // Click event
    const t = document.getElementById('testplaceholder');
    t.addEventListener("click",function(e) {
            getnsax();
        }                       
    },false);
    
    
    // Ajax Request 
    getnsax = function () {             
        $.ajax({
            type: "POST",
            url: "/include/new-from-select.php";
            headers: {                          
            },          
            data: {                     
            },                                      
            success: function(data) {                           
                $("#testdiv").html(data);
            },
            complete: function() {                  
                $("#newsddown").focus();                                                    
            },                      
        });
    }       
    
    
    // new-from-select.php
    <div id="newdiv">
        <label>Abholort</label>                                     
        <select autocomplete="off" id="new-select">  
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
            ...
        </select>
    </div>

Answer 1

您可以創建一個看起來像 select 字段和 onclick 的容器，您可以將 innerHTML 設置為填充的 select