Safari问题 - 使用AJAX下拉菜单

Question

I have installed a dropdown menu (in a php site) that makes use of Ajax functionality to populate the dropdown list.

It functions correctly in Chrome and Firefox, and NOT Safari.

In Safari it works;

• If the user tabs into the field;
• If the user double clicks the field, or clicks in the field and then outside the element.

The form code reads;

$(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

To start with you might try putting some quotes around the id you use for the value in the append line.

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

Not having that value quoted may confuse the Safari browser.

I would also change the echo at the bottom of your page for the table to this. I find using single quotes for echoing html output to be more intuitive and allows you to use double quotes for the tag attributes.

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>';