PHP站点AJAX下拉菜单在Safari中加载异常问题求助

你遇到的是Safari对<select>元素事件触发逻辑和Chrome/Firefox不一致的典型问题——在Safari中，直接点击<select>的下拉箭头展开菜单时，focus事件并不会像其他浏览器那样可靠触发，只有当你通过Tab切换聚焦、双击元素，或者点击后再点击外部触发失焦再聚焦时，focus才会被正确触发，导致你的AJAX加载逻辑没执行。

解决方案：同时监听focus和click事件（附加防重复请求处理） #

我们可以给目标元素同时绑定focus和click事件，再添加一个标志位避免重复发起AJAX请求，这样就能覆盖Safari的特殊场景：

$(document).ready(function(){
  let isDataLoaded = false; // 标记数据是否已加载，避免重复请求
  const loadClientOptions = function() {
    if (isDataLoaded) return; // 已加载则直接返回，不重复请求

    $.ajax({
      url: 'GetClient.php',
      type: 'post',
      dataType: 'json',
      success:function(response){
        var len = response.length;
        $('#sel_user').empty();
        // 重新添加上默认选项（原代码empty会把初始选项清空）
        $('#sel_user').append('<option value="0"> - Make A Selection -</option>');
        for( var i = 0; i<len; i++){
          var id = response[i]['id'];
          var name = response[i]['name'];
          var mat = response[i]['Matter'];
          // 用模板字符串替代拼接，提升可读性
          $('#sel_user').append(`<option value="${id}"> ClientID: ${id} - Name: ${name} : ${mat}</option>`);
        }
        isDataLoaded = true; // 加载完成后标记状态
      }
    });
  };

  // 同时绑定focus和click事件，覆盖所有触发场景
  $('.sel_field').on('focus click', loadClientOptions);
});

优化点说明： #

• 新增isDataLoaded标志位：防止用户多次触发事件时重复发送AJAX请求，减少服务器不必要的压力；
• 恢复默认选项：原代码中empty()会把初始的- Make A Selection -选项清空，优化后重新添加了这个选项，保持交互一致性；
• 使用模板字符串：替代传统的字符串拼接，让代码更易读，还能避免引号转义的问题。

为什么这个方案能适配Safari？ #

在Safari中，点击<select>的下拉区域时，click事件会被可靠触发，而focus可能不会；通过同时监听两个事件，就能覆盖所有触发场景（Tab聚焦、点击、双击等），确保AJAX请求能被执行。

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