{"id":10371,"date":"2018-06-26T12:05:28","date_gmt":"2018-06-26T18:05:28","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=10371"},"modified":"2025-03-12T07:49:57","modified_gmt":"2025-03-12T13:49:57","slug":"multi-value-ajax-cascading-dropdowns","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=multi-value-ajax-cascading-dropdowns","title":{"rendered":"Multi-value AJAX Cascading Dropdowns"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-danger\"><strong>This techblog post is deprecated.<\/strong> As of the March 2025 update, m-Power supports multi-value \/ multi-dependencies when making cascading dropdowns.  To utilize instead, please see this document <a href=\"\/docs\/knowledge-base\/using-ajax-helpers#ajax-cascading-dropdown-list\">here<\/a>.  <\/p>\n\n\n\n<p>Occasionally when working with cascading dropdowns in your applications, there may be instances where you need to pass multiple values to filter a subsequent drop-down.<\/p>\n\n\n\n<p>Remember that <a rel=\"noreferrer noopener\" href=\"\/docs\/knowledge-base\/using-ajax-helpers#ajax-cascading-dropdown-list\" data-type=\"URL\" target=\"_blank\">AJAX cascading dropdowns<\/a> by default only look at the dependent field immediately proceeding the current dropdown in order to populate the valid values. Meaning if I have dropdowns A, B, and C, the selection of B determines the values for C. <\/p>\n\n\n\n<p><strong>However what this document will show how you can pass both the selection of A and B to determine the values of C.<\/strong><\/p>\n\n\n\n<p>C will be what is called a &#8220;Multi-value AJAX Cascading&#8221; dropdown list.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Walkthrough<\/h2>\n\n\n\n<p>Take for example a Regular Report with three runtime value prompt filters, as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>R001 &#8211; State <\/li>\n\n\n\n<li>R002 &#8211; County<\/li>\n\n\n\n<li>R003 &#8211; City<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">R00<strong>1 <\/strong>stands for the first runtime value prompt filter in the report, R00<strong>2<\/strong> is the second, etc.<\/p>\n\n\n\n<p>When I am selecting a county, this list is filtered based on my state that I&#8217;ve selected in the state dropdown. When I select my city, this list is filtered off the county I&#8217;ve selected. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/mrc-productivity.com\/techblog\/images\/multivalueajax1.jpg\"><img decoding=\"async\" src=\"https:\/\/mrc-productivity.com\/techblog\/images\/multivalueajax1.jpg\" alt=\"Report Example\" style=\"width:668px;height:545px\"\/><\/a><figcaption class=\"wp-element-caption\">Figure 1. Example of my USCITY dropdown, once a state and county have been selected.<\/figcaption><\/figure>\n\n\n\n<p>While this is the intended behavior, there are scenarios where you may run into problems and need to pass multiple values to subsequent cascading dropdowns.<\/p>\n\n\n\n<p>To help understand, observe the records in the underlying table that I&#8217;ve built my AJAX cascading dropdowns over:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/mrc-productivity.com\/techblog\/images\/multivalueajax2.jpg\"><img decoding=\"async\" src=\"https:\/\/mrc-productivity.com\/techblog\/images\/multivalueajax2.jpg\" alt=\"Table data\"\/><\/a><figcaption class=\"wp-element-caption\">Figure 2. The dataset for the dropdowns in Figure 1.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>When a user goes to select the city after choosing a state (IN) and county (Boone), the list shows all cities within Boone county.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p>Notice however that in my table above, Boone county exists in the state of Indiana and Missouri, therefore my city dropdown is showing me all cities for Boone county, regardless of my selected state. <\/p>\n\n\n\n<p>In this case I would need to use a multi-value cascading dropdown to pass not only the selected county, but the selected state as well to my city dropdown, in order to filter my dropdown appropriately and only show me the cities within Indiana&#8217;s Boone county (those being <strong>Whitestown<\/strong>, <strong>Jamestown<\/strong>, <strong>Zionsville<\/strong>).<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><a href=\"\/techblog\/images\/multivalueajax3.jpg\"><img decoding=\"async\" src=\"\/techblog\/images\/multivalueajax3.jpg\" alt=\"\"\/><\/a><figcaption class=\"wp-element-caption\">Figure 3.Ashland is not a valid city in Indiana&#8217;s (IN) Boone county. <\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>To do this first open up the Report in m-Painter. I&#8217;m going to remove my previously created AJAX Cascading Dropdown on my third level dropdown and convert this back to a normal text input (see <a href=\"\/docs\/knowledge-base\/using-ajax-helpers#remove-helper\" data-type=\"URL\" data-id=\"\/docs\/knowledge-base\/using-ajax-helpers#remove-helper\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a> for how to remove an existing AJAX helper).<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon\">The third filter must be set back to a text input, as the jQuery code I&#8217;m going to utilize in the next step will handle creating the necessary dropdown at run-time. <\/p>\n\n\n\n<p>The following jQuery code will be pasted into your application&#8217;s JS file (JavaScript) from m-Painter. See <a rel=\"noreferrer noopener\" href=\"\/docs\/knowledge-base\/m-painter-source-mode-features#improved-organization-of-application-asset-files\" data-type=\"URL\" data-id=\"\/docs\/knowledge-base\/m-painter-source-mode-features#improved-organization-of-application-asset-files\" target=\"_blank\">here<\/a> for how to access your application&#8217;s JavaScript file. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>jQuery(function(){\n     var cascadeConfig = {\n          lookup:'DD.I00010s',\n          applyTo: 'R003',\n          lookupField: 'USCITY',\n          dependencies: &#91;\n                {\n                   triggerRefresh: true,\/\/change of this field triggers                 select list to populate\n                   field: 'R002',\n                   lookupField: 'USCOUNTY'\n                },\n                {\n                   field: 'R001',\n                   lookupField: 'USSTATE'\n                 }\n             ]\n     }\n      ajaxMultiCascade.initMultiCascade(cascadeConfig);\n});<\/code><\/pre>\n\n\n\n<p>Example:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/techblog\/images\/multivalueajax4.jpg\"><img decoding=\"async\" src=\"\/techblog\/images\/multivalueajax4.jpg\" alt=\"\"\/><\/a><figcaption class=\"wp-element-caption\">Figure 4. Implementing the jQuery code into my application&#8217;s JS file.<\/figcaption><\/figure>\n\n\n\n<p>Once you have added this script to your application, the following adjustments need to be made:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>lookup<\/code>: Point this to the Web 2.0 Option list dropdown that accesses your third level dropdown (where DD is your dictionary name, followed by the retrieval application number).<\/li>\n\n\n\n<li><code>applyTo<\/code>: Name of field in the current app (In this case, I am applying this to a runtime record selection &#8216;R00#&#8217;, but this can also be applied to a field).<\/li>\n\n\n\n<li><code>lookupField<\/code>: Name of field to lookup for the external option list retrieval app.<\/li>\n\n\n\n<li><code>triggerRefresh:<\/code> set this to <strong>true <\/strong>on the field that you wish to trigger the new dropdown value to load. <\/li>\n\n\n\n<li><code>field<\/code>: Name of field or runtime value prompt filter that contains the dropdown.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\"><strong>Note<\/strong>: In the event you need to have more than just one multi-value cascading dropdown in your application (ex. there are 4 runtime value record selections; State-&gt;County-&gt;City-&gt;District) and this new selection for District (<code>R004<\/code>) needs to be a multi-value cascading drop-down as well) you can reuse the above code to add an additional variable block called <code>cascadeConfig2<\/code>, which will perform the multi-value dropdown filtering for District.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>jQuery(function(){\n     var <strong><mark style=\"background-color:#000000;color:#fff300\" class=\"has-inline-color\">cascadeConfig2<\/mark> <\/strong>= {\n          lookup:'DD.I00020s',\n          applyTo: 'R004',\n          lookupField: 'DISTRICT',\n          dependencies: &#91;\n                {\n                   triggerRefresh: true,\/\/change of this field triggers select list to populate\n                   field: 'R003',\n                    lookupField: 'USCITY'\n                },\n                {\n                   field: 'R002',\n                   lookupField: 'USCOUNTY'\n                 },\n                {\n                   field: 'R001',\n                   lookupField: 'USSTATE'\n                }\n             ]\n     }\n      ajaxMultiCascade.initMultiCascade(<strong><mark style=\"background-color:#000000;color:#fff300\" class=\"has-inline-color\">cascadeConfig2<\/mark><\/strong>);\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">As highlighted in the code below, you must use a unique variable name for reach multi-value cascading dropdown you have in the application. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview Occasionally when working with cascading dropdowns in your applications, there may be instances where you need to pass multiple values to filter a subsequent drop-down. Remember that AJAX cascading dropdowns by default only look at the dependent field immediately proceeding the current dropdown in order to populate the valid&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[],"ht-kb-tag":[],"class_list":["post-10371","ht_kb","type-ht_kb","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10371"}],"version-history":[{"count":69,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10371\/revisions"}],"predecessor-version":[{"id":12426,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10371\/revisions\/12426"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10371"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=10371"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=10371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}