{"id":378903,"date":"2023-04-29T03:54:16","date_gmt":"2023-04-29T03:54:16","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=378903"},"modified":"2023-05-26T05:47:23","modified_gmt":"2023-05-26T05:47:23","slug":"get-dropdown-options-dependent-dropdown-admin-ui-component","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/","title":{"rendered":"Get dropdown options from the dependent dropdown"},"content":{"rendered":"\n

In this blog, we are going to learn how we can get dropdown options from the dependent dropdown option in the admin form using the Ui component<\/a>.<\/p>\n\n\n\n

Here is the example we are going to achieve:-<\/strong><\/p>\n\n\n\n

We have two dropdowns in the custom module. 1st is for Car Maker and 2nd for the Car Model. The Car Model dropdown is dependent on the Car Maker dropdown.<\/p>\n\n\n\n

All options will be displayed in the Car Model dropdown on selecting the dependent Car Maker dropdown option.<\/p>\n\n\n\n

Let’s start the code, How can achieve the same:-<\/strong><\/p>\n\n\n\n

Step 1<\/strong>:- Create a layout file with the name mobikulcore_year_edit.xml file inside the app\/code\/Vendor\/Module\/view\/adminhtml\/layout\/<\/strong> directory.<\/p>\n\n\n\n

For defining the page layout and calling ui component.<\/p>\n\n\n\n

<!--\n\/**\n * Module Software.\n *\n * @category  Webkul\n * @package   Webkul_Module\n * @author    Webkul\n * @copyright Copyright (c) Webkul Software Private Limited (https:\/\/vendor.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n-->\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="..\/..\/..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/View\/Layout\/etc\/page_configuration.xsd">\n    <update handle="styles"\/>\n    <body>\n        <referenceContainer name="content">\n            <uiComponent name="mobikulcore_year_form"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
Step 2: <\/strong>Create a UI component file with the name mobikulcore_year_form<\/code>.xml file inside the app\/code\/Vendor\/Module\/view\/adminhtml\/ui_component\/<\/strong> directory.<\/p>\n\n\n\n
For defining the dropdown fields in the UI component.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<?xml version="1.0" encoding="UTF-8"?>\n<!--\n\/**\n * Module Software.\n *\n * @category  Webkul\n * @package   Webkul_Module\n * @author    Webkul\n * @copyright Copyright (c) Webkul Software Private Limited (https:\/\/vendor.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n-->\n<form xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n    <argument name="data" xsi:type="array">\n        <item name="js_config" xsi:type="array">\n            <item name="provider" xsi:type="string">mobikulcore_year_form.year_list_data_source<\/item>\n            <item name="deps" xsi:type="string">mobikulcore_year_form.year_list_data_source<\/item>\n        <\/item>\n        <item name="label" xsi:type="string" translate="true">Sample Form<\/item>\n        <item name="layout" xsi:type="array">\n            <item name="type" xsi:type="string">tabs<\/item>\n        <\/item>\n\n        <item name="buttons" xsi:type="array">\n            <item name="save" xsi:type="string">Vendor\\Module\\Block\\Adminhtml\\Year\\Edit\\SaveButton<\/item>\n        <\/item>\n    <\/argument>\n\n    <dataSource name="year_list_data_source">\n        <argument name="dataProvider" xsi:type="configurableObject">\n            <argument name="class" xsi:type="string">Vendor\\Module\\Model\\Year\\DataProvider<\/argument>\n            <argument name="name" xsi:type="string">year_list_data_source<\/argument>\n            <argument name="primaryFieldName" xsi:type="string">entity_id<\/argument>\n            <argument name="requestFieldName" xsi:type="string">id<\/argument>\n            <argument name="data" xsi:type="array">\n                <item name="config" xsi:type="array">\n                    <item name="submit_url" xsi:type="url" path="*\/*\/save"\/>\n                <\/item>\n            <\/argument>\n        <\/argument>\n        <argument name="data" xsi:type="array">\n            <item name="js_config" xsi:type="array">\n                <item name="component" xsi:type="string">Magento_Ui\/js\/form\/provider<\/item>\n            <\/item>\n        <\/argument>\n    <\/dataSource>\n\n    <fieldset name="year">\n        <argument name="data" xsi:type="array">\n            <item name="config" xsi:type="array">\n                <item name="label" xsi:type="string" translate="true">Year<\/item>\n            <\/item>\n        <\/argument>\n        <field name="car_maker_id">\n            <argument name="data" xsi:type="array">\n                <item name="options" xsi:type="object">Vendor\\Module\\Model\\Config\\Source\\CarMaker<\/item>\n                <item name="config" xsi:type="array">                    \n                    <item name="sortOrder" xsi:type="number">20<\/item>\n                    <item name="dataType" xsi:type="string">text<\/item>\n                    <item name="component" xsi:type="string">Vendor_Module\/js\/form\/element\/CarMaker<\/item>\n                    <item name="formElement" xsi:type="string">select<\/item>\n                    <item name="label" xsi:type="string" translate="true">Car Maker<\/item>\n                    <item name="source" xsi:type="string">category<\/item>\n                    <item name="validation" xsi:type="array">\n                        <item name="required-entry" xsi:type="boolean">true<\/item>\n                    <\/item>\n                <\/item>\n            <\/argument>\n        <\/field>\n        \n        <field name="model_line_id">\n            <argument name="data" xsi:type="array">\n                <item name="options" xsi:type="object">Module\\Module\\Model\\Config\\Source\\ModelLine<\/item>\n                <item name="config" xsi:type="array">                    \n                    <item name="sortOrder" xsi:type="number">30<\/item>\n                    <item name="dataType" xsi:type="string">text<\/item>\n                    <item name="formElement" xsi:type="string">select<\/item>\n                    <item name="label" xsi:type="string" translate="true">Model<\/item>\n                    <item name="source" xsi:type="string">category<\/item>\n                    <item name="validation" xsi:type="array">\n                        <item name="required-entry" xsi:type="boolean">true<\/item>\n                    <\/item>\n                <\/item>\n            <\/argument>\n        <\/field>\n    <\/fieldset>\n<\/form><\/pre>\n\n\n\n
Step 3<\/strong>: Create a CarMaker source file for showing all options in the car maker dropdown with the name CarMaker<\/code>.php inside the app\/code\/Vendor\/Module\/Model\/Config\/Source<\/strong> directory.<\/p>\n\n\n\n
For displaying all the options for Car Maker dropdown.<\/p>\n\n\n\n
<?php\n\/**\n * Module Software.\n *\n * @category  Webkul\n * @package   Webkul_Module\n * @author    Webkul\n * @copyright Copyright (c) Webkul Software Private Limited (https:\/\/vendor.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n\nnamespace Vendor\\Module\\Model\\Config\\Source;\nuse Magento\\Framework\\Option\\ArrayInterface;\n\nclass CarMaker implements ArrayInterface\n{\n\n\n    \/**\n     * __construct\n     *\n     * @param \\Magento\\Config\\Model\\Config\\Source\\Locale\\Timezone $timezone\n     *\/\n    public function __construct(\n        \\Vendor\\Module\\Model\\ResourceModel\\CarMaker\\Collection $carMakerCollection\n    ) {\n        $this->carMakerCollection = $carMakerCollection;\n    }\n    \n    public function toOptionArray()\n        {\n            $options = [];\n            foreach($this->carMakerCollection as $carMaker){\n                $option = [];\n                $option['value'] = $carMaker->getId();\n                $option['label'] = $carMaker->getLabel();\n                $options[]  = $option;\n\n            }\n            \n            return $options;\n        }\n}<\/pre>\n\n\n\n
Step 4<\/strong>: Create a js component file with the name CarMaker<\/code>.js file inside the app\/code\/Vendor\/Module\/view\/adminhtml\/web\/js\/form\/element\/<\/strong> directory.<\/p>\n\n\n\n
For the js event, get Car Model options by selecting the Car Maker dropdown.<\/p>\n\n\n\n
\/**\n * Module Software.\n *\n * @category  Webkul\n * @package   Webkul_Module\n * @author    Webkul\n * @copyright Copyright (c) Webkul Software Private Limited (https:\/\/vendor.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\ndefine([\n    'jquery',\n    'Magento_Ui\/js\/form\/element\/select',\n    'mage\/url'\n], function ($, Select,url) {\n    'use strict';\n    \n    return Select.extend({\n        \n        defaults: {\n            customName: '${ $.parentName }.${ $.index }_input'\n        },\n        \/**\n         * Change currently selected option\n         *\n         * @param {String} id\n         *\/\n        onUpdate: function(value){\n            this.ajax(value);\n        },\n        ajax: function(value){\n            $.ajax({\n                url: window.ajaxUrl+'\/mobikulcore\/year\/ajax\/',\n                showLoader: true,\n                data: {form_key: window.FORM_KEY, 'car_maker_id':value},\n                type: "POST",\n                dataType : 'json',\n                success: function(result){\n                \n                    $('select[name="year[model_line_id]"]')\n                    .find('option')\n                    .remove()\n                    .end();\n              \n                    $('select[name="year[model_line_id]"]')\n                    .append($('<option>', {\n                        value: "",\n                        text: "Select Item"\n                    })); \n\n                    result.forEach(function(item) {\n                        \n                        $('select[name="year[model_line_id]"]')\n                        .append($('<option>', {\n                            value: item.entity_id,\n                            text: item.label\n                        }));        \n                    });\n                   \n                }\n            });\n        }\n    });\n});<\/pre>\n\n\n\n
Step 5<\/strong>: Now, create a controller file for Ajax request to get the Car Model date using Car Maker with the name Ajax.php file inside the app\/code\/Vendor\/Module\/Controller\/Year\/ <\/strong>directory.<\/p>\n\n\n\n
For Ajax request to get all Car model options by selecting  Car Maker.<\/p>\n\n\n\n
<?php\n\/**\n * Module Software.\n *\n * @category  Webkul\n * @package   Webkul_Module\n * @author    Webkul\n * @copyright Copyright (c) Webkul Software Private Limited (https:\/\/vendor.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Vendor\\Module\\Controller\\Year;\n\nclass Ajax extends \\Magento\\Framework\\App\\Action\\Action\n{\n    protected $resultPageFactory = false;\n\n\tpublic function __construct(\n\t\t\\Magento\\Framework\\App\\Action\\Context $context,\n\t\t\\Magento\\Framework\\Controller\\Result\\JsonFactory $jsonFactory,\n\t\t\\Vendor\\Module\\Model\\ResourceModel\\ModelLine\\CollectionFactory $modelCollectionFactory,\n\t\t\\Vendor\\Module\\Model\\ResourceModel\\Year\\CollectionFactory $yearCollectionFactory,\n\t\t\\Vendor\\Module\\Model\\ResourceModel\\Modification\\CollectionFactory $modificationCollectionFactory\n\t)\n\t{\n\t\tparent::__construct($context);\n\t\t$this->jsonFactory = $jsonFactory;\n\t\t$this->modelCollectionFactory = $modelCollectionFactory;\n\t\t$this->yearCollectionFactory = $yearCollectionFactory;\n\t\t$this->modificationCollectionFactory = $modificationCollectionFactory;\n\t}\n\n\tpublic function execute()\n\t{\n\t\t$formData = $this->getRequest()->getParams('formData');\n\n\t\tif($formData['type'] == "carMaker"){\n\t\t\t$modelLine = $this->modelCollectionFactory->create();\n\t\t\t$modelLine->addFieldToFilter("car_maker_id",$formData['id']); \n\t\t\t$resultJson = $this->jsonFactory->create();\n\n        return $resultJson->setData($modelLine->getData());\n\t\t}\n\t\t$resultJson = $this->jsonFactory->create();\n\n\t\treturn $resultJson->setData([]);\n\n\t\t\n\t}\n\t   \n}<\/pre>\n\n\n\n
Now, look into the first image in which Car Maker<\/strong> dropdown options are displayed in the form.<\/p>\n\n\n\n
\"car-maker-dropdown-ss\"<\/figure>\n\n\n\n
And in the last image in which, As you can see all options are displayed in the Car Model dropdown options mapped with the selected Car Maker.<\/p>\n\n\n\n
\"car-model-dropdown-ss\"<\/figure>\n\n\n\n
Hope this will be helpful.<\/p>\n\n\n\n
Thanks \ud83d\ude42<\/p>\n\n\n\n
You can see other blogs as well:-<\/p>\n\n\n\n
Add Custom Product Attributes<\/a><\/p>\n\n\n\n
Add Custom Customer Group<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we are going to learn how we can get dropdown options from the dependent dropdown option in the admin form using the Ui component. Here is the example we are going to achieve:- We have two dropdowns in the custom module. 1st is for Car Maker and 2nd for the Car Model. […]<\/a><\/p>\n","protected":false},"author":354,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[14103,14102,3753],"class_list":["post-378903","post","type-post","status-publish","format-standard","hentry","category-magento2","tag-magento-ui-component","tag-ui-compoent-form","tag-ui-component"],"yoast_head":"\nGet dropdown options from the dependent dropdown - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Get dropdown options from the dependent dropdown in admin using the UI component. Get all options on selecting the parent-dependent dropdown.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Get dropdown options from the dependent dropdown - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Get dropdown options from the dependent dropdown in admin using the UI component. Get all options on selecting the parent-dependent dropdown.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-29T03:54:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-26T05:47:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/car-maker-dropdown-ss-1200x575.png\" \/>\n<meta name=\"author\" content=\"Mubarik\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mubarik\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/\"},\"author\":{\"name\":\"Mubarik\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/2fa581764e96125af674349150b2b818\"},\"headline\":\"Get dropdown options from the dependent dropdown\",\"datePublished\":\"2023-04-29T03:54:16+00:00\",\"dateModified\":\"2023-05-26T05:47:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/\"},\"wordCount\":355,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/car-maker-dropdown-ss-1200x575.png\",\"keywords\":[\"Magento Ui Component\",\"Ui compoent form\",\"Ui Component\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/\",\"url\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/\",\"name\":\"Get dropdown options from the dependent dropdown - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/car-maker-dropdown-ss-1200x575.png\",\"datePublished\":\"2023-04-29T03:54:16+00:00\",\"dateModified\":\"2023-05-26T05:47:23+00:00\",\"description\":\"Get dropdown options from the dependent dropdown in admin using the UI component. Get all options on selecting the parent-dependent dropdown.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/04\/car-maker-dropdown-ss.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/04\/car-maker-dropdown-ss.png\",\"width\":1289,\"height\":618,\"caption\":\"car-maker-dropdown-ss\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Get dropdown options from the dependent dropdown\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/2fa581764e96125af674349150b2b818\",\"name\":\"Mubarik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/af8c0b8b43a042ae4d9fd3cb5207b18bbe898d7ab63344df28ac22803b26a0ee?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/af8c0b8b43a042ae4d9fd3cb5207b18bbe898d7ab63344df28ac22803b26a0ee?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Mubarik\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/md-mubarik459\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Get dropdown options from the dependent dropdown - Webkul Blog","description":"Get dropdown options from the dependent dropdown in admin using the UI component. Get all options on selecting the parent-dependent dropdown.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/","og_locale":"en_US","og_type":"article","og_title":"Get dropdown options from the dependent dropdown - Webkul Blog","og_description":"Get dropdown options from the dependent dropdown in admin using the UI component. Get all options on selecting the parent-dependent dropdown.","og_url":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-04-29T03:54:16+00:00","article_modified_time":"2023-05-26T05:47:23+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/car-maker-dropdown-ss-1200x575.png","type":"","width":"","height":""}],"author":"Mubarik","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Mubarik","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/"},"author":{"name":"Mubarik","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/2fa581764e96125af674349150b2b818"},"headline":"Get dropdown options from the dependent dropdown","datePublished":"2023-04-29T03:54:16+00:00","dateModified":"2023-05-26T05:47:23+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/"},"wordCount":355,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/car-maker-dropdown-ss-1200x575.png","keywords":["Magento Ui Component","Ui compoent form","Ui Component"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/","url":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/","name":"Get dropdown options from the dependent dropdown - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/car-maker-dropdown-ss-1200x575.png","datePublished":"2023-04-29T03:54:16+00:00","dateModified":"2023-05-26T05:47:23+00:00","description":"Get dropdown options from the dependent dropdown in admin using the UI component. Get all options on selecting the parent-dependent dropdown.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/04\/car-maker-dropdown-ss.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/04\/car-maker-dropdown-ss.png","width":1289,"height":618,"caption":"car-maker-dropdown-ss"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/get-dropdown-options-dependent-dropdown-admin-ui-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Get dropdown options from the dependent dropdown"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/2fa581764e96125af674349150b2b818","name":"Mubarik","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/af8c0b8b43a042ae4d9fd3cb5207b18bbe898d7ab63344df28ac22803b26a0ee?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/af8c0b8b43a042ae4d9fd3cb5207b18bbe898d7ab63344df28ac22803b26a0ee?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Mubarik"},"url":"https:\/\/webkul.com\/blog\/author\/md-mubarik459\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/378903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/354"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=378903"}],"version-history":[{"count":20,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/378903\/revisions"}],"predecessor-version":[{"id":383687,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/378903\/revisions\/383687"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=378903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=378903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=378903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}