解决点击占位符Select下拉框时出现空白选项的问题

方案一：阻止原生下拉展开行为（最简单有效） #

核心思路：在点击事件中先阻止select的默认展开动作，避免浏览器显示空白下拉区域，同时标记已加载状态防止重复请求。

修改你的点击事件代码：

const t = document.getElementById('testplaceholder');
let isLoaded = false; // 标记是否已完成加载，避免重复触发AJAX

t.addEventListener("click", function(e) {
    if (!isLoaded) {
        e.preventDefault(); // 阻止下拉框默认展开行为
        isLoaded = true;
        getnsax();
    }
}, false);

同时修正AJAX代码中的语法错误（原代码url末尾多了分号）：

getnsax = function () {             
    $.ajax({
        type: "POST",
        url: "/include/new-from-select.php", // 移除末尾的分号
        headers: {},          
        data: {},                                      
        success: function(data) {                           
            $("#testdiv").html(data);
        },
        complete: function() {                  
            $("#new-select").focus(); // 修正原代码中ID拼写错误
        },                      
    });
}

方案二：用模拟元素替代原生Select（彻底避免原生行为） #

如果方案一存在兼容问题，可以用普通元素模拟Select的外观，点击模拟元素触发AJAX，加载完成后替换为真实Select：

替换初始HTML：

<div id="testdiv">
    <label>Abholort</label>                                      
    <div id="select-mock" style="border:1px solid #999; padding:6px 8px; cursor:pointer; width:fit-content;">
        Suchen
    </div>
</div>

修改点击事件：

const mock = document.getElementById('select-mock');
mock.addEventListener("click", function() {
    getnsax();
}, false);

这种方式完全绕开原生Select的默认行为，不会出现空白下拉区域。

方案三：加载时添加视觉反馈并阻止重复交互 #

在AJAX发起后，给原Select添加视觉加载状态，同时阻止后续点击，避免用户重复触发：

修改AJAX函数：

getnsax = function () {             
    const placeholder = document.getElementById('testplaceholder');
    // 添加加载状态样式
    placeholder.style.pointerEvents = 'none';
    placeholder.style.opacity = '0.6';
    placeholder.style.cursor = 'wait';

    $.ajax({
        type: "POST",
        url: "/include/new-from-select.php",
        headers: {},          
        data: {},                                      
        success: function(data) {                           
            $("#testdiv").html(data);
        },
        error: function() {
            // 出错时恢复原状态
            placeholder.style.pointerEvents = 'auto';
            placeholder.style.opacity = '1';
            placeholder.style.cursor = 'pointer';
            isLoaded = false; // 允许重新尝试
        }
    });
}

内容的提问来源于stack exchange，提问作者evavienna