使用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浏览器或firefox检查器中检查元素时，这些更改是可见的。原因是什么，我如何解决使用ajax更新实际页面上的下拉列表的问题？
回答 1
Stack Overflow用户
发布于 2021-04-13 11:27:19
找到了解决我问题的办法。通过对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")来查看实际页面上下拉列表中的更改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67070885
复制相关文章
相似问题
腾讯云开发者
