cakephp 3中的链接下拉菜单

Question

我有 4 个表 categories、subcategories、product_types 和 products。每个都在以下层次结构中相互关联。

categories
|- subcategories
   |- product_types
      |- products

ProductsController的add()动作的观点是

        <?= $this->Form->create($product, ['type' => 'file', 'class' => 'ajax_page']) ?>
            <fieldset>
                <legend><?= __('Add Product') ?> <div class="ajax_loading_image"></div></legend>
                <?php
                    echo $this->Form->input('category_id', ['options' => $categories, 'empty' => true]);
                    echo $this->Form->input('subcategory_id', ['options' => $subcategories]);
                    echo $this->Form->input('product_type_id', ['options' => $productTypes]);
                    echo $this->Form->input('product_code');
                    echo $this->Form->input('SKU');
                    echo $this->Form->input('title');
                    echo $this->Form->input('description');
             </fieldset>
   <?php echo $this->Form->end(); ?>

现在它是列表中的整个列表 subcategories。我想使用 Ajax.

在 categories 变化时加载 subcategories，在 subcategories 变化时加载 product_types

我找不到 CakePHP 的好示例 3.x 并且一些文档提到 js 助手已从 CakePHP 3 中删除

它如何在 CakePHP 3 中实现。我是 CakePHP 的新手，也是 Ajax。

谢谢。

Answer 1

ctp 文件如下。这里首先我给字段类别、子类别、产品类型和产品代码 id。

<?= $this->Form->create($product, ['type' => 'file', 'class' => 'ajax_page']) ?>
    <fieldset>
        <legend><?= __('Add Product') ?> <div class="ajax_loading_image"></div></legend>
        <?php
                echo $this->Form->input('category_id', ['options' => $categories, 'empty' => true,'id'=>'categories']);
                echo $this->Form->input('subcategory_id', ['options' => '$subcategories','id'=>'subcategories']);
                echo $this->Form->input('product_type_id', ['options' => '$productTypes','id'=>'producttype']);
                echo $this->Form->input('product_code',['options'=>'$productcode','id'=>'productcode']);
                echo $this->Form->input('SKU');
                echo $this->Form->input('title');
                echo $this->Form->input('description');
    </fieldset>     <?php echo $this->Form->end(); ?>

在您的 ajax 子类别调用中，如下所示。您可以为 product_type 和产品代码

创建相同的 ajax 调用

<script>
    $("#categories").on('change',function() {
        var id = $(this).val();

        $("#subcategories").find('option').remove();
        if (id) {
            var dataString = 'id='+ id;
            $.ajax({
                dataType:'json',
                type: "POST",
                url: '<?php echo Router::url(array("controller" => "yourcontroller", "action" => "youraction")); ?>' ,
                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($("#subcategories"));

                    });
                } 
            });
        }
    });

从这段代码中，您可以获得链式下拉菜单。它适合你。

cakephp 3中的链接下拉菜单

Chained dropdown menu in cakephp 3

ajax

cakephp

cakephp-3.x

chained-select