Magento 2 create admin form selected option depend on another selected option

Question

I have created an module for admin which have admin form and this form have some fields.I have two select option drop down fields.If I choose first dropdown option value then second drop-down display some values and if I choose another option then value should be different.

I have search on forums but not found any solution.Please help me.

screenshot are attached.

Answer 1

This May Help you . I have used this on a drop-down in ui-component. Selecting a options shows respective field. add this code in your ui-component

<field name="apply">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Vendor\Module\Model\Config\Source\Action</item>
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Apply</item>
                <item name="component" xsi:type="string">Vendor_Module/js/form/options</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="source" xsi:type="string">yoursourcename</item>
                <item name="dataScope" xsi:type="string">apply</item>
                <item name="notice" xsi:type="string" translate="true">Select type.</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>
    <field name="fixed">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="additionalClasses" xsi:type="array">
                    <item name="admin__field-fixed-value" xsi:type="boolean">true</item>
                </item>
                <item name="label" xsi:type="string">Price :</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">flashsalespro</item>
                <item name="sortOrder" xsi:type="number">20</item>
                <item name="breakLine" xsi:type="boolean">true</item>
                <item name="visibleValue" xsi:type="string">2</item>
                <item name="visible" xsi:type="boolean">false</item>
            </item>
        </argument>
    </field>
    <field name="percentage">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="additionalClasses" xsi:type="array">
                    <item name="admin__field-percentage-value" xsi:type="boolean">true</item>
                </item>
                <item name="label" xsi:type="string">Percentage :</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">flashsalespro</item>
                <item name="dataScope" xsi:type="string">percentage</item>
                <item name="sortOrder" xsi:type="number">20</item>
                <item name="breakLine" xsi:type="boolean">true</item>
                <item name="visibleValue" xsi:type="string">0</item>
                <item name="visible" xsi:type="boolean">true</item>
            </item>
        </argument>
    </field>

Add option.js in

Vendor/Module/view/adminhtml/web/js/form/

    define([

    'underscore',

    'uiRegistry',

    'Magento_Ui/js/form/element/select',

    'Magento_Ui/js/modal/modal',

    'ko'

], function (_, uiRegistry, select, modal, ko) {

    'use strict';

    return select.extend({


        initialize: function () {
            this._super();

            this.fieldDepend(this.value());

            return this;

        },

        onUpdate: function (value)
        {
            var field_percentage = uiRegistry.get('index = percentage'); // get field

            var field_fixed = uiRegistry.get('index = fixed'); // get fieldset

            if (value === 'fixed') {

                field_percentage.hide();

                field_fixed.show();
            }

            else {

                field_percentage.show();

                field_fixed.hide();

            }
            return this._super();

        },
        fieldDepend: function (value)

        {
            setTimeout( function(){
                var field_percentage = uiRegistry.get('index = percentage');

                var field_fixed = uiRegistry.get('index = fixed');

                if (value === 'fixed') {

                    field_percentage.hide();
                    field_fixed.show();
                }

            });

        }
    });

});

I have used fields you can use drop down .