程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用ajax动态更改下拉列表大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决使用ajax动态更改下拉列表?

开发过程中遇到使用ajax动态更改下拉列表的问题如何解决?下面主要结合日常开发的经验,给出你关于使用ajax动态更改下拉列表的解决方法建议,希望对你解决使用ajax动态更改下拉列表有所启发或帮助;

我正在尝试根据使用 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 更新实际页面上的下拉列表的问题?

解决方法

得到了解决我的问题的方法。在 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") 以查看实际页面下拉列表的变化。

大佬总结

以上是大佬教程为你收集整理的使用ajax动态更改下拉列表全部内容,希望文章能够帮你解决使用ajax动态更改下拉列表所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: