Dependent dropdown in magento 2

With dynamic dependent form fields, Store owner can easily ask further qualifying
questions based on the user’s answers using various conditions. Basically, dependent
forms dynamically show/hide or changes the value of form fields based on the user
selections.

For example, if you want to list out products of a particular category, then we have to
create category-products dropdown so that when users select a category, related
products will be shown in dropdown option.

Here we’ve come up with the custom code in which whenever user picks country
option from drop-down, state drop-down will be displayed with respective options
based on the dropdown country selection. And also when user picks country and
state option, city option will be displayed based on the country and state selection.
We have developed this functionality using Ajax code.

Firstly, you need to add form to your phtml file with following code.

<select name="country" id="country" class="input-text" title="<?php echo __('Country')
?>">   

       <?php foreach ($countries as $_country): ?>

<option value="<?php echo $_country['value'] ?>" <?php echo $_country
['value'] ==
$country ? 'selected' : ''; ?>> <?php echo $_country['label'] ?>

</option>

<?php endforeach; ?>

</select>

<select name="state" id="state" class="input-text" title="<?php echo __('State') ?>">

<?php foreach ($states as $_state): ?>

<option value="<?php echo $_state['value'] ?>" <?php echo $_state['value']
== $state ?
'selected' : ''; ?>> <?php echo $_state['label'] ?>

</option>

<?php endforeach; ?>

</select>

<select name="city" id="city" class="input-text" title="<?php echo __('City') ?>">

<?php foreach ($citycollection as $_city): ?>

<option value="<?php echo $_city['value'] ?>" <?php echo $_city['value']
== $city ?
'selected' : ''; ?>> <?php echo $_city['label'] ?>

</option>

<?php endforeach; ?>

</select>

And for corresponding ajax code is given below:

$(document).on('change', '#country', function () {

               var param = 'country=' + $('#country').val();

               $.ajax({

                   showLoader: true,

                   url: '<?php /* @escapeNotVerified */ echo $block->getDropdownAction
('state'); ?>',

                   data: param,

                   type: "GET",

                   dataType: 'json'

               }).done(function (data) {

                   $('#state').empty();

                   $('#city').empty();

                   $('#state').append(data.value);

               });

           });

           $(document).on('change', '#state', function () {

               var param = 'state=' + $('#state').val() + '&country=' + $('#country').val();

               $.ajax({

                   showLoader: true,

                   url: '<?php /* @escapeNotVerified */ echo $block->getDropdownAction
('city'); ?>',

                   data: param,

                   type: "GET",

                   dataType: 'json'

               }).done(function (data) {

                   $('#city').empty();

                   $('#city').append(data.value);

               });

           });

In Block file for this templete, you have to add the below function.

public function getDropdownAction($code)

{

       return $this->getUrl('locator/dropdown/'.$code, ['_secure' => true]);

}

Lastly, we need to create action using “ajax-handler.php” file that can handle all the
ajax request
comes from frontend form.

app\code\local\Vendor\Extension\Controller\Dropdown\State.php

<?php

namespace Vendor\Extension\Controller\Dropdown;

use Vendor\Extension\Model\StoreFactory;

class State extends \Magento\Framework\App\Action\Action {

   protected $resultJsonFactory;

   protected $_storeFactory;

   public function __construct(

   \Magento\Framework\App\Action\Context $context, \Magento\Framework\Controller\
Result\JsonFactory
$resultJsonFactory, StoreFactory $storeFactory) {

       $this->_storeFactory = $storeFactory;

       $this->resultJsonFactory = $resultJsonFactory;

       parent::__construct($context);

   }

   public function execute() {

       $this->_view->loadLayout();

       $this->_view->getLayout()->initMessages();

       $this->_view->renderLayout();

       $result = $this->resultJsonFactory->create();

       $states = array_unique($this->_storeFactory->create()->getCollection()->addFieldTo
Filter('country', $this->getRequest()->getParam('country'))->getColumnValues('state'));

       $html = '';

       if (count($states) > 0) {

           $html .= '<option selected="selected" value="">----Select State----</option>';

           foreach ($states as $state) {

               $html .= '<option  value="' . $state . '">' . $state . '</option>';

           }

       }

       return $result->setData(['success' => true, 'value' => $html]);

   }

}

This will fetch states based on the value selected in country dropdown. For fetching
city based on country and state, we have to create new file mentioned below.

<?php

namespace Vendor\Extension\Controller\Dropdown;

use Vendor\Extension\Model\StoreFactory;

class City extends \Magento\Framework\App\Action\Action {

   protected $resultJsonFactory;

   protected $_storeFactory;

   public function __construct(

   \Magento\Framework\App\Action\Context $context, \Magento\Framework\Controller\
Result\JsonFactory $resultJsonFactory, StoreFactory $storeFactory) {

       $this->_storeFactory = $storeFactory;

       $this->resultJsonFactory = $resultJsonFactory;

       parent::__construct($context);

   }

   public function execute() {

       $this->_view->loadLayout();

       $this->_view->getLayout()->initMessages();

       $this->_view->renderLayout();

       $result = $this->resultJsonFactory->create();

       $cities = array_unique($this->_storeFactory->create()->getCollection()->
addFieldToFilter('country', $this->getRequest()->getParam('country'))->
addFieldToFilter('state', $this->getRequest()->getParam('state'))->getColumnValues
('city'));

       $html = '';

       if (count($cities) > 0) {

           $html .= '<option selected="selected" value="">----Select City----</option>';

           foreach ($cities as $city) {

               $html .= '<option  value="' . $city . '">' . $city . '</option>';

           }

       }

       return $result->setData(['success' => true, 'value' => $html]);

   }

}

                   

And well, you are done with adding dependent dropdown options in your Magento 2
store frontend form. You can even add or change form elements based on your
requirement of collecting various information.