magento2 – Magento 2: Define the dependency between two drop-down menus in the form of user interface

You should have two drop-down menus in the following form:


    
        VendorName  Module Name  Template  Config  Source  Options
        
            Drop-down list 1
            VendorName_ModuleName / js / form / element / options
            true
            number
            to select
            article
            dropdown1
            100
            
                true
            
        
    



    
        
            Dropdown 2
            text
            to select
            article
            110
            true
            false

        
    

Above the code, which is the drop-down list of parents, this is only the visible value true. The value of the child drop-down list must be false.

Now create your options file:

VendorName Module Name Template Config Source Options

namespace VendorName  ModuleName  Template  Config  Source;

use Magento  Framework  Option  ArrayInterface;

class Options implements ArrayInterface
{
/ **
* @return array
* /
public function toOptionArray ()
{
$ options = [
            0 => [
                'label' => 'India',
                'value' => 'IN'
            ],
1 => [
                'label' => 'Germany',
                'value' => 'DE'
            ],
];

returns $ options;
}
}

Now, create js for the dependency:

app / code / VendorName / Module Name / view / adminhtml / web / js / form / element / options.js

to define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
& # 39; use strict & # 39 ;;

returns select.extend ({

/ **
* On the change manager.
*
* @param {String} value
* /
onUpdate: function (value) {
console.log (value); // to display the selected value

var field1 = uiRegistry.get (& index = dropdown2 & # 39;);
if (field1.visibleValue == value) {
field1.show ();
} other {
field1.hide ();
}
return this._super ();
}
});
});

Cheers 🙂