使用ajax动态更改下拉列表答案

【问题标题】：Dynamically changing dropdown list with ajax使用ajax动态更改下拉列表
【发布时间】：2021-04-13 08:00:49
【问题描述】：

我正在尝试根据使用 ajax 从另一个下拉菜单中选择的选项动态更改下拉内容。即使我能够在 google chrome 浏览器检查元素或 firefox 检查器中查看更改的下拉列表，但在实际页面上，下拉列表没有任何变化。以下是视图文件中的 ajax 代码，用于根据在另一个下拉列表中选择的选项更改下拉列表。

<?php echo $output; ?>
<script>        
$(document).ready(function(){
    $("#permissions_input_box").change(function(){
        $.ajax({
            "url" : "<?php echo site_url('main/get_device_list/9'); ?>",
            "type": "POST",
            "dataType" : "json",
            "success": function(data){
                           $('select[name="firealarm"]').empty();
                           $('select[name="firealarm"]').append('<option value=""></option>');
                           $.each(data, function(key, value) {
                               $('select[name="firealarm"]').append($('<option>').text(value).attr('value', value));            
                           });
                      }
        });
    });
});
</script>

以下是来自控制器的get_device_list函数的简短代码

public function get_device_list($value) {
        $reponse = //Get data from database
        echo json_encode($response);
    }

在下拉菜单中所做的更改在实际页面中不可见，但当我在 google chrome 浏览器或 firefox 检查器中检查元素时可见。可能是什么原因以及如何解决使用 ajax 更新实际页面上的下拉列表的问题？

【问题讨论】：

标签： jquery grocery-crud

【解决方案1】：

为我的问题找到了解决方案。随着 ajax 代码的以下更改，它工作正常。

<?php echo $output; ?>
<script>        
$(document).ready(function(){
    $("#permissions_input_box").change(function(){
        $.ajax({
            "url" : "<?php echo site_url('main/get_device_list/9'); ?>",
            "type": "POST",
            "dataType" : "json",
            "success": function(data){
                           $('select[name="firealarm"]').empty();
                           $('select[name="firealarm"]').append('<option value=""></option>');
                           $.each(data, function(key, value) {
                               $('select[name="firealarm"]').append($('<option>').text(value).attr('value', value)).trigger("chosen:updated");            
                           });
                      }
        });
    });
});
</script>

我们需要添加.trigger("chosen:updated")才能在实际页面上查看下拉菜单的变化。

【讨论】：