I have used below code to populate sub categories in other dropdown once the parent category is selected.

Used this code in my template file.


<div class="custom-dropdown">
        <select id="parent-cat" name="parent-cat" onchange="getChildrenList(this.value)">    
            <option value ="">- Please Select -</option>
             <option value ="3">Cat1</option>
             <option value ="4">Cat1</option>
    <div class="custom-dropdown center-cus-drop">
        <select id="child-cat" name="child-cat" >    
            <option value ="">- sub category -</option>

  function getChildrenList(parentId) {
    var customurl = "<?php echo $this->getUrl().'frontname/category/childcategory' ?>";
         url: customurl,
         type: "POST",
         data : 'category_id='+parentId,
         dataType: 'json',
         success : function(result) {



  use Magento\Catalog\Api\CategoryRepositoryInterface;
  use Magento\Catalog\Model\Category;
  use Magento\Framework\App\Action\Action;
  use Magento\Framework\App\Action\Context;
  use Magento\Framework\Controller\Result\JsonFactory;

  class Childcategory extends Action
    protected $categoryRepository;
    protected $resultJsonFactory;

  public function __construct(Context $context, CategoryRepositoryInterface 
   $categoryRepository, JsonFactory $jsonFactory)
    $this->categoryRepository = $categoryRepository;
    $this->resultJsonFactory = $jsonFactory;

public function execute()
    // get parent category
    $parentId = $this->getRequest()->getParam('category_id');
    /** @var Category $category */
    $category = $this->categoryRepository->get($parentId);
    $childrenData = [];
    foreach ($category->getChildrenCategories() as $childrenCategory) {
        $childrenData[] = [
            'name' => $childrenCategory->getName(),
            'id' => $childrenCategory->getId()
    return $this->resultJsonFactory->create()->setData($childrenData);

When the main category drop down changes my ajax call is hitting and i am getting the result. I need to append the result to the sub category drop down.

How this can be done using magento 2 standards? can anyone help me on this please? Thanks in advance

  • Did you find the answer? I am having same issue
    – embed0
    Jan 17, 2019 at 9:26
  • @embed0, no not yet, i am waiting Jan 17, 2019 at 10:12

2 Answers 2


Here at this link you can download complete module for multiple dropdown list of parent and child categories. https://www.magearray.com/category-dynamic-dependent-dropdown-extension-for-magento-2.html

Can You post a complete code and installation and usage procedure of Your drop down categories module?


Now you can add a AJAX navigation dropdowns to your store that displays categories as drop-down fields. and upon selecting category from one dropdown it will show sub categories of selected categories upto N levels. on selection of last category it will redirect to that last selected categories url.

Extension link :- http://www.nextbits.eu/category-dynamic-dependent-dropdown-year-make-model-magento-extension.html

Demo link:- http://demo.nextbitsgroup.com/dynamicdependentdropdown/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.