Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
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.
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 .
