Проблема с Safari - раскрывающееся меню с использованием AJAX

Для начала вы можете попробовать заключить в кавычки идентификатор, который вы используете для значения в строке добавления.

$('#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>';

Вместо этого вы можете попробовать следующее:

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

});