使用 AJAX 的下拉菜单

Question

我已经安装了一个下拉菜单(在php站点中(，它利用Ajax功能来填充下拉列表。 它工作正常，除了列表仅在您按 Tab 键进入下拉按钮时才填充。 如果你点击按钮，它需要两次点击才能填充(这往往会让人们大吃一惊(。

该函数从焦点事件调用。 我已经尝试过单击，单击，加载，加载等，但没有任何效果。

表单代码为;

echo "<script>
$(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>');

}
}
});
});
});

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

Answer 1

在不知道你期待什么和你实际得到什么的情况下，很难帮助你。我根据您的代码制作了一个片段，将 ajax 调用替换为 setTimeout 函数。它正在做一些事情...它与你正在经历的有多近/多远，你到底期待什么？

-编辑：也许负载的延迟正在扔人？我添加了一行，用于在等待 ajax 完成它正在做的事情时将选择文本更改为"加载"。

$(document).ready(function(){
$('.sel_field').focus(function(){
$('#sel_user').html('<option value="0">Loading...</option>');
setTimeout(function(){
var len = 2;
$('#sel_user').empty();
for( var i = 0; i<len; i++){
var id = 1;
var name2 = 'name2-'+i;
var name = 'name-'+i;
var mat = 'mat'+i;
$('#sel_user').append('<option value='+id+'> ClientID: '+id+' -  Name:   '+name+' : '+mat+'</option>');
}
}, 1000);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>