数据未填充到带有 AJAX 请求的选择标记中

Posted 2023-02-24

【中文标题】数据未填充到带有 AJAX 请求的选择标记中

【英文标题】：Data not populating in select tag with AJAX request

【发布时间】：2022-01-03 15:31:28

【问题描述】：

目前我有一个选择标签，每次用户单击该特定选择标签时，我都想通过 AJAX 调用填写该标签。为此，我正在执行以下操作：

查看类：

<label class="control-labels ">Property</label>
     <select name="property" class="form-control select2 selectsearch" <?php echo (isset($read) ? $read:''); ?> required>
     </select>

Ajax 请求：

$(document).ready(function()  

    $("#property").click(function()

    var post_url = 'listings/getonClick'
    $.ajax(
        type: "POST",
        url: post_url,
        data :  "hid" : $(this).val() ,
        success: function(response)
            $.each(response, function(value, key) 
                $("#property").append("<option id="+value.id+">"+value.name+"</option>");
            )
        
    );
);

控制器类：

function getonClick()

    $modelList = $this->listings_model->getProperties();

    echo(json_encode($modelList));

模型类：

 function getProperties()
    $this->db->select("id,name");
    $this->db->from("crm_project_properties");
    $query = $this->db->get();
    return $query->result_array() ;
 

但是在这样做之后，我在点击它之前甚至之后都无法在我的选择标签中获取任何数据

【问题讨论】：

检查控制台是否有错误。此外，在用户点击后填充选择听起来会很烦人 - 用户需要点击一次以填充选项，然后再次点击以实际打开列表。

@RoryMcCrossan 所以现在我有 3 个选择标签，每个标签大约有 30000 个条目，这使得页面加载非常缓慢。因此，我需要一种方法来最小化/删除它，方法是进行一些 AJAX 调用，以将其发送到另一个视图或其他东西。控制台中也没有错误

无论如何，拥有 30000 个条目的下拉菜单听起来像是糟糕的用户体验。尝试使用 Select2 之类的东西在用户输入内容时动态加载选项

@brombeer 好的，所以现在我已经在我的视图类中添加了 select2，但是当我检查源代码时，它仍然在一个选择中显示了 30000 行的选项

在这种情况下，您需要找到一种方法来减少该数据集。例如，您可以将 30k 项列表拆分为单独的类别，因此您可以先选择一些较小的下拉列表来过滤数据集。无论如何，这是您需要解决的真正问题。上述问题对于您遇到的主要问题是多余的，即数据权重。

【参考方案1】：

您可以尝试使用 .on("click") 吗？ 它过去对我有用

$(document).ready(function () 
     $("#property").on("click", '*:not(a)', function() 
       var post_url = 'listings/getonClick'
         $.ajax(
           type: "POST",
           url: post_url,
           data :  "hid" : $(this).val() ,
           success: function(response)
                $.each(response, function(value, key) 
                   $("#property").append("<option id="+value.id+">"+value.name+"</option>");
           )
         
      );
);

【参考方案2】：

您应该首先将您的响应编码为 JSON 对象

$(document).ready(function()  

    $("#property").click(function()

    var post_url = 'listings/getonClick'
    $.ajax(
        type: "POST",
        url: post_url,
        data :  "hid" : $(this).val() ,
        success: function(response)
            var responseText = JSON.parse(response);
            $.each(responseText , function(value, key) 
                $("#property").append("<option id="+value.id+">"+value.name+"</option>");
            )
        
    );
);