javascript - magento 中的嵌套类别下拉列表

Question

我在 magento 前端中有以下工作代码，其形式是我正在开发的客户“添加产品”功能:

辅助区:

public function getCategoriesDropdown() {

    $categoriesArray = Mage::getModel('catalog/category')
        ->getCollection()
        ->addAttributeToSelect('name')
        ->addAttributeToSort('path', 'asc')
        ->addFieldToFilter('is_active', array('eq'=>'1'))
        ->load()
        ->toArray();


    foreach ($categoriesArray as $categoryId => $category) {
        if (isset($category['name'])) {
            $categories[] = array(
                'label' => $category['name'],
                'level'  =>$category['level'],
                'value' => $categoryId
            );
        }
    }
    return $categories;
}

PHTML 文件:

<select id="category-changer" name="category-changer" style="width:150px;">
        <option value="">--Select Categories--</option>
            <?php
             $_CategoryHelper = Mage::helper("marketplace")->getCategoriesDropdown();
                        foreach($_CategoryHelper as $value){
                            foreach($value as $key => $val){

                                if($key=='label'){
                                    $catNameIs = $val;
                                }
                                if($key=='value'){
                                    $catIdIs = $val;
                                }
                                if($key=='level'){
                                    $catLevelIs = $val;
                                    $b ='';
                                    for($i=1;$i<$catLevelIs;$i++){
                                        $b = $b."-";
                                    }
                                }
                            }
                            ?>
              <option value="<?php echo $catIdIs; ?>"><?php echo $b.$catNameIs ?></option>
                        <?php
                        }
                        ?>
                    </select>

此代码生成一个包含类别和子类别的下拉列表。像这个:

我的主要想法是为子类别创建 n 级嵌套链接下拉菜单，如下例所示:

或者这个布局会更好:

任何修改建议的 php 以包含 ajax 调用的指导或代码示例，或生成那些前端链接前端的 javascript 将不胜感激

兄弟们!

Answer 1

这是我的方法:

在辅助类中，添加方法:

public function getCategoriesDropdown() {
    $categories = Mage::getModel('catalog/category')
        ->getCollection()
        ->addAttributeToSelect('name')
        ->addAttributeToSort('path', 'asc')
        ->addFieldToFilter('is_active', array('eq'=>'1'));

    $first = array();
    $children = array();
    foreach ($categories->getItems() as $cat) {
        if ($cat->getLevel() == 2) {
            $first[$cat->getId()] = $cat;
        } else if ($cat->getParentId()) {
            $children[$cat->getParentId()][] = $cat->getData();
        }
    }

    return array('first' => $first, 'children' => $children);
}

在 PHTML 文件中:

<?php $tree = $this->helper('xxx')->getCategoriesDropdown(); ?>
<script type="text/javascript">
    var children = $H(<?php echo json_encode($tree['children']) ?>);

    function showCat(obj, level) {
        var catId = obj.value;
        level += 1;
        if ($('cat_container_' + level)) {
            $('cat_container_' + level).remove();
        }
        if (children.get(catId)) {
            var options = children.get(catId);
            var html = '<select id="cat_' + catId + '" onchange="showCat(this, ' + level + ')">';
            for (var i = 0; i < options.length; i++) {
                html += '<option value="' + options[i].entity_id + '">' + options[i].name + '</option>';
            }
            html += '</select>';
            html = '<div id="cat_container_' + level + '">' + html + '</div>';

            $('sub_cat').insert(html);
        }
    }
</script>
<select id="first_cat" onchange="showCat(this, 2)">
    <?php foreach ($tree['first'] as $cat): ?>
        <option value="<?php echo $cat->getId() ?>"><?php echo $cat->getName() ?></option>
    <?php endforeach ?>
</select>
<div id="sub_cat"></div>