JavaScript 将多级转换为<select>手风琴

Question

在我的项目帖子页面中，它们是选择主要类别的，而选择它显示相关的子类别。我想将其更改为手风琴。请帮助我如何更改此问题。因此，当用户访问我的网站并尝试发布广告时，应该向手风琴显示以选择主要类别和子类别。请通过修改代码或使用Java-Script实现这一目标来帮助我实现这一目标。

代码`

    $categoryID = Params::getParam('catId');
    if( osc_item_category_id() != null ) {
        $categoryID = osc_item_category_id();
    }
    if( Session::newInstance()->_getForm('catId') != '' ) {
        $categoryID = Session::newInstance()->_getForm('catId');
    }
    $subcategoryID = '';
    if( !Category::newInstance()->isRoot($categoryID) ) {
        $subcategoryID = $categoryID;
        $category      = Category::newInstance()->findRootCategory($categoryID);
        $categoryID    = $category['pk_i_id'];
    }
    if($categories == null) {
        if(View::newInstance()->_exists('categories')) {
            $categories = View::newInstance()->_get('categories');
        } else {
            $categories = osc_get_categories();
        }
    }
    if ($item == null) { $item = osc_item(); }
    $subcategory = array();
    ?>
<select id="parentCategory" name="parentCatId">
    <option value=""><?php _e('Select a category', 'modern'); ?></option>
    <?php foreach($categories as $_category) {
    $selected = ( (isset($item["fk_i_category_id"]) && $item["fk_i_category_id"] == $_category['pk_i_id']) || (isset($categoryID) && $categoryID == $_category['pk_i_id']) );
    if($selected) { $subcategory = $_category; };
    echo '<option value="'.$_category['pk_i_id'].'" '.($selected ? 'selected="selected"' : '' ).'>'.$_category['s_name'].'</option>';
} ?>
</select>
<select id="catId" name="catId">
    <?php
    if(!empty($subcategory)) {
        if( count($subcategory['categories']) > 0 ) {
            echo '<option value="">'.__('Select Subcategory', 'modern').'</option>'; 
            foreach($subcategory['categories'] as $c) {
                $selected = ( (isset($item["fk_i_category_id"]) && $item["fk_i_category_id"] == $c['pk_i_id']) || (isset($subcategoryID) && $subcategoryID == $c['pk_i_id']) );
                echo '<option value="'.$c['pk_i_id'].'" '.($selected ? 'selected="selected"' : '' ).'>'.$c['s_name'].'</option>';
            }
        } else {
            echo '<option value="'.$categoryID.'" >'._e('No Subcategory', 'modern').'</option>';
        }
    } else {
        echo '<option value="">'._e('Select Subcategory', 'modern').'</option>';
    }
    ?>
</select>
<script type="text/javascript" charset="utf-8">
        <?php
        foreach($categories as $c) {
            if( count($c['categories']) > 0 ) {
                $subcategory = array();
                for($i = 0; $i < count($c['categories']); $i  ) {
                    $subcategory[] = array($c['categories'][$i]['pk_i_id'], $c['categories'][$i]['s_name']);
                }
                printf('var categories_%1$s = %2$s;', $c['pk_i_id'], json_encode($subcategory));
                echo PHP_EOL;
            }
        }
        ?>
    $(document).ready(function(){
        $("#parentCategory").bind('change', function(){
            var categoryID = $(this).val();
            if( categoryID == 0 ) {
                var options = '<option value="'   categoryID   '" selected=""><?php _e('No Subcategory', 'modern'); ?></option>';
            }
            categories = window['categories_'   categoryID];
            if( categories==null || !$.isArray(categories) ) {
                var options = '<option value="'   categoryID   '" selected=""><?php _e('No Subcategory', 'modern'); ?></option>';
            } else {
                var options = '<option value="'   categoryID   '" selected=""><?php _e('Select Subcategory', 'modern'); ?>...</option>';
                $.each(categories, function(index, value){
                    options  = '<option value="'   value[0]   '">'   value[1]   '</option>';
                });
            };
            $('#catId').html(options);
            $("#catId").next("a").find(".select-box-label").text('Select a Sub Category...');
            $("#catId").change();
            $("div#uniform-catId.selector").css('visibility', 'visible');
        });
         // In case of error and Category already chosen, let's show the Subcategory selector
        if($("div#uniform-parentCategory.selector select").val()) {
            $("div#uniform-catId.selector").css('visibility', 'visible');
        }
    });
</script>
<?php
}

？>`

Answer 1

如果这与bender的item-post.php相关（例如），请使用

<?php ItemForm::category_select(null, null, __('Select a category', 'bender')); ?>

而不是

<?php ItemForm::category_multiple_selects(); ?>

ps。这不是JS解决方案。