Question

我越来越喜欢使用AJAX，JSON和JQuery。我正在从头编写一个应用程序来替换以前有缺陷的应用程序。

虽然我正在使用AJAX方法取得进展并且越来越好，但我遇到了各种我认真想要纠正的问题，以便我的替换应用程序完美无瑕。

我的应用程序使用AJAX来调用PHP脚本。它返回我用来填充某些下拉列表的JSON，供用户选择。

在大多数情况下，应用程序会执行它应该执行的操作。许多下拉列表填充了解析的JSON数据。用户可以选择一个或多个下拉列表，然后触发将返回数据的SEARCH查询。

当上一次搜索的数据集很大时，似乎会出现此问题。我说话的人数不多。当我点击下拉列表进行新搜索时，下拉列表（之前填充JSON数据）现在是空白的。

它不会一直这样做。当初始搜索返回大型数据集时，似乎会出现此问题。我不能肯定。

这是我的文件中名为bpSearch.php的html :(只是我的两个下拉菜单）

 <div class="input-group">
 <span class="input-group-addon">Sales Rep</span>
    <select class="form-control" id="salesRep" name="salesRep">
        <option value=""></option>
    </select>                                                   
 </div>

 <div class="input-group">
    <span class="input-group-addon">Services</span>
    <select class="form-control" id="service" name="service">
        <option value=""></option>                                                      
    </select>
 </div>

还有一些下拉菜单。我只列出了2。

这是javascript（也在同一个文件中，bpSearch.php），通过AJAX和JSON填充下拉列表：

 <script type="text/javascript">

 // populates the dropdown id #salesRep
 $.getJSON( "api/reps.php", function( data ) 
 {
   $.each(data, function(index, item)
   {
     $('<option>').
       attr('value', item.fullname).
       text(item.fullname).
       appendTo($('#salesRep'));
   });
 });

 // populates the dropdown id #service
 $.getJSON( "api/services.php", function( data )
 {
   $.each(data, function(index, item)
   {
     $('<option>').
       attr('value', item.service).
       text(item.service).
       appendTo($('#service'));
   });
 });
 </script>

这是名为reps.php的PHP。这将返回#service下拉列表的JSON数据：

 <?php

   if ($result = 
         mysqli_query($dbc, "SELECT DISTINCT(service) 
                       FROM services_imp ORDER BY service")) 
   {
     $out = array();
     while ($row = $result->fetch_assoc()) 
     {
       $out[] = $row;
     }

     echo json_encode($out);

     mysqli_free_result($result);
   }
 ?>

此时，我认为我不需要显示reps.php的代码。它几乎与services.php的代码完全相同，当然除了我在查询中搜索的字段的名称。

使用上面的所有代码，我可以按照说明填充下拉列表。但是，正如我之前所说，有时下拉值在进行搜索后会消失。当数据集很大时，似乎总会发生这种情况。

以下是服务下拉列表工作时的样子：

enter image description here

这是我执行返回更大数据集的搜索后的样子：

enter image description here

我不明白为什么会这样。

如果您有任何见解，或者您在我的代码中看到导致此错误的任何内容，请告诉我们。

Answer 1

确保在DOM就绪事件

中加载下拉列表是一种很好的做法

$(function()
{
   //AJAX call for loading dropdowns
})

请首先确保在DOM就绪事件中进行调用。

Answer 2

以下代码在调用AJAX函数时禁用下拉列表，并在数据完全加载时启用它。页面完全加载时执行开始，我将AJAX调用减少到一个接受元素和uri作为输入的泛型函数。此函数还可以复制select。在内存中附加新选项，在构建列表时，原始选择将替换为克隆的选项。这应该可以提高浏览器的性能。

function loadDataAndAppendToSelect(select, uri)
{
    $(select).prop('disabled', true); //disable
    // populates the dropdown id
     $.getJSON( uri, function( data ) 
     {
       var tempElement = $(select).clone();
       $.each(data, function(index, item)
       {
         $('<option>').
           attr('value', item.fullname).
           text(item.fullname).
           appendTo(tempElement);
       });
       $(select).replaceWith(tempElement);
       $(select).prop('disabled', false); //enable
     });
}

$(document).ready(function(){
    loadDataAndAppendToSelect('#salesRep', 'api/reps.php');
    loadDataAndAppendToSelect('#service', 'api/services.php');
});

下拉值在基于AJAX的jQuery元素中消失

2 个答案: