使用AJAX的下拉菜单

Question

我已经安装了一个下拉菜单（在php站点中），该菜单利用Ajax功能填充了下拉列表。 可以正常工作，只是列表中的内容只有在您使用Tab键进入下拉按钮时才会填充。 如果单击该按钮，则需要单击两次以进行填充（这往往会以主要方式丢人）。

该函数从焦点事件中调用。 我试过单击，onclick，加载，onload和其他操作，但是没有任何效果。

表单代码为：

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>