我正在尝试根据使用 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 更新实际页面上的下拉列表的问题?
答案 0 :(得分:0)
得到了解决我的问题的方法。在 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")
以查看实际页面下拉列表的变化。