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 .