Question

我安装了一个下拉菜单（在php站点中），该菜单利用Ajax功能填充下拉列表。

它在Chrome和Firefox中正常运行，而非Safari。

在Safari中它起作用;

如果用户选中该字段;
如果用户双击该字段，或单击该字段，然后单击该元素外部。

表单代码读取;

$(document).ready(function(){
    $('.sel_field').focus(function(){

        $.ajax({
            url: 'GetClient.php',
            type: 'post',
            dataType: 'json',
            success:function(response){

                var len = response.length;

                $('#sel_user').empty();
                for( var i = 0; i<len; i++){
                    var id = response[i]['id'];
                    var name2 = response[i]['username'];
                    var name = response[i]['name'];
                    var mat = response[i]['Matter'];

                    $('#sel_user').append('<option value='+id+'> ClientID: '+id+' -  Name:   '+name+' : '+mat+'</option>');

                }
            }
        });
    });
});

<tr>
    <td>
        Client ID <span style='font-size:10px'>(Press tab to enter)</span>
    </td>
    <td>
        <select  name='clientID' style='width:460px' class='form-control sel_field' id='sel_user' >
            <option value='0'> - Make A Selection -</option>
        </select>
    </td>
</tr>

Answer 1

首先，您可以尝试在附加行中为您的ID使用一些引号。

$('#sel_user').append('<option value="'+id+'"> ClientID: '+id+' -  Name:   '+name+' : '+mat+'</option>');

没有引用该值可能会混淆Safari浏览器。

我还会将表格底部的回显更改为此表格。我发现使用单引号来回显html输出更直观，并允许您使用双引号作为标记属性。

echo 
'<tr>
  <td>
    Client ID <span style="font-size:10px">(Press tab to enter)</span>
  </td>
  <td>
    <select  name="clientID" style="width:460px" class="form-control sel_field" id="sel_user" >
      <option value="0"> - Make A Selection -</option>
    </select>
  </td>
</tr>';

Answer 2

你可以试试这个：

$('.sel_field').on("keyup click", function(){

您可能想设置一个加载的标志，以便您知道您的选项已经加载，不应再次加载。

更新了JS代码：

var options_loaded = false;

$(document).ready(function() {
  $('.sel_field').on("keyup click", function(){
    if(options_loaded == true) return;
    $.ajax({
      url: 'GetClient.php',
      type: 'post',
      dataType: 'json',
      success: function(response) {
        var len = response.length;

        $('#sel_user').empty();
        for (var i = 0; i < len; i++) {
          var id = response[i]['id'];
          var name2 = response[i]['username'];
          var name = response[i]['name'];
          var mat = response[i]['Matter'];

          $('#sel_user').append('<option value=' + id + '> ClientID: ' + id + ' -  Name:   ' + name + ' : ' + mat + '</option>');
        }
        options_loaded = true;
      }
    });
  });

});

Safari问题 - 使用AJAX下拉菜单

2 个答案: