Magento 2 : Filter dropdown value by other dropdown value : (Chained Select Boxes) in Checkout page

Question

I try to do dropdown option filter and autofill postcode.

for select step are Country > City > State/Province > District > autofill postcode

What I have done

• convert city textbox to dropdown and populate city name(from DB).
• add dropdown for district and populate district name(from DB).
• create table for district (district_id , region_id , postcode)

My Code

plugin file

class LayoutProcessorPlugin{

/**
 * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
 * @param array $jsLayout
 * @return array
 *
 */

public function afterProcess(
    \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
    array  $jsLayout
) {
    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['shipping-address-fieldset']['children']['city'] = [
        'component' => 'Magento_Ui/js/form/element/select',
        'config' => [
            'customScope' => 'shippingAddress',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/select',
            'name' => __('City'),

        ],
        'dataScope' => 'shippingAddress.city',
        'label' => __('City'),
        'provider' => 'checkoutProvider',
        'visible' => true,
        'validation' => [],
        'sortOrder' => 120,
        'name' => __('City'),
        'validation' => [
            'required-entry' => true,
        ],
        'options' => $this->districttoOptionArray(),



    ];
    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['shipping-address-fieldset']['children']['subcity'] = [
        'component' => 'Magento_Ui/js/form/element/select',
        'config' => [
            'customScope' => 'shippingAddress',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/select',
            'name' => __('subcity')
        ],
        'dataScope' => 'shippingAddress.subcity',
        'label' => __('แขวง'),
        'provider' => 'checkoutProvider',
        'visible' => true,
        'validation' => [],
        'sortOrder' => 121,
        'name' => __('subcity'),
        'validation' => [
            'required-entry' => true,
        ],
        'options' => $this->subdistricttoOptionArray(),



    ];
    return $jsLayout;
}

Output

My problem

1. I don't know how magento2 do filter (like in Checkout/LayputProcessor filter state by country dropdown)

   'filterBy' => [ 'target' => '${ $.provider }:${ $.parentScope }.country_id', 'field' => 'country_id', ]

2. how to auto fill postcode textbox

reference : create field in checkout page (Magento2 "delivery date" module creation from scratch)

Answer 1

public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $subject, $result)
{
$districtAttributeCode = 'district_id';
$districtField = [
    'component' => 'Vendor_Module/js/form/element/district',
    'config' => [
        'customScope' => 'shippingAddress',
        'customEntry' => 'shippingAddress.district',
        'template' => 'ui/form/field',
        'elementTmpl' => 'ui/form/element/select',
    ],
    'dataScope' => 'shippingAddress.district_id',
    'provider' => 'checkoutProvider',
    'filterBy' => [
        'target' => '${ $.provider }:${ $.parentScope }.region_id',
        'field' => 'region_id',
    ],
    'customEntry' => 'shippingAddress.region_id'
];

$result['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$districtAttributeCode] = $districtField;

return $result;
}



public function afterProcess(\Magento\Checkout\Block\Checkout\DirectoryDataProcessor $directoryDataProcessor, $jsLayout)
{
    if (!isset($jsLayout['components']['checkoutProvider']['dictionaries']['district_id'])) {
        $jsLayout['components']['checkoutProvider']['dictionaries']['district_id'] = 
[
    [
            'value' => ’’,
         'label' => ‘’,
         'title' => ‘’,
          ‘region_id’ => ‘’,
    ],….

];
    }
    return $jsLayout;
}

enter code here

define([
    'Magento_Ui/js/form/element/select'
], function ( Select) {
    'use strict';

    return Select.extend({
        defaults: {
            skipValidation: false,
            imports: {
                update: '${ $.parentName }.region_id:value',
                initialOptions: "index =
checkoutProvider:dictionaries.district_id",
                setOptions: "index = checkoutProvider:dictionaries.district_id"
            }
        },
    });
});