我是CakePHP和ajax的新手。我试图弄清楚如何利用AJAX在CakePHP 3.8.0中进行依赖(链接)下拉菜单。
例如,我正在制作一些表格来学习如何构建链接的下拉菜单。我有三个表models
,chapters
,userinputs
。在Userinputs
表中,我将基于模型章节加载。现在显示所有模型和所有章节。这就是他们所有的联系方式。
how all three tables are connected
我一直在网上查看一些示例,并尝试将其应用到我的代码中,但似乎没有任何效果。这是我的Userinputs
表的add.ctp。
<div class="userinputs form large-9 medium-8 columns content">
<?= $this->Form->create($userinput, ['type' => 'file', 'class' => 'ajax_page']) ?>
<fieldset>
<legend><?= __('Add Userinput') ?><div class="ajax_loading_image"></legend>
<?php
echo $this->Form->control('model_id', ['options' => $models, 'empty' => true, 'id'=>'models']);
echo $this->Form->control('chapter_id', ['options' => $chapters, 'empty' => true, 'id'=>'chapters']);
?>
</fieldset>
<?= $this->Form->button(__('Submit')) ?>
<?= $this->Form->end() ?>
我还在Userinputs
表的add.ctp末尾添加了此脚本
<script>
$("#models").on('change',function() {
var id = $(this).val();
$("#chapters").find('option').remove();
if (id) {
var dataString = 'id='+ id;
$.ajax({
dataType:'json',
type: "POST",
url: '<?php echo Router::url(array("controller" => "Userinputs", "action" => "getChapters")); ?>' ,
data: dataString,
cache: false,
success: function(html) {
//$("#loding1").hide();
$.each(html, function(key, value) {
//alert(key);
//alert(value);
//$('<option>').val('').text('select');
$('<option>').val(key).text(value).appendTo($("#chapters"));
});
}
});
}
});
</script>
在Userinputs
的控制器中,我添加了一个公共函数
public function getChapters()
{
$id = $this->request->data('id');
$chapters = $this->Chapters->find('all', [ 'conditions' => [ 'model_id' => $id ] ]);
echo json_encode($chapters);
}
请查看我的代码,并协助我如何使其正常工作。任何帮助深表感谢。