Question

我安装了一个下拉菜单（在php站点中），该菜单利用Ajax功能填充下拉列表。它工作正常，但只有当你勾选到下拉按钮时才会填充列表。如果你点击按钮，它需要两次点击才能填充（这往往会让人们产生重大影响）。

从焦点事件调用该函数。我尝试过点击，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

如果不知道自己的期望和实际获得的内容，很难帮助你。我根据你的代码制作了一个片段，用setTimeout函数替换了ajax调用。它正在做一些事情......你对你所经历的事情有多接近/远，你到底想要什么？

- 编辑：也许负载的延迟是扔人？我已经添加了一行来将select文本更改为“loading”，同时等待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>

使用AJAX下拉菜单

1 个答案: