i have two dropdowns
first dropdown has values 1,2,3
second dropdown has values 4,5,6
in case second dropdown is value 5 is selected now if in first dropdown if u select 2 then in second dropdown 5 should be hidden and automaicallyy second dropdown value should have become 4 in dropdown
Solved! Go to Solution.
Views
Replies
Total Likes
Hello @satishpothabathula ,
For your requirement, you can add a custom clientlib. To help or hints you can follow this JS, where after selecting the 1st dropdown other select field options are disabled. Where your requirement is just to hide.
Code Sinppet,
(function (document, $, Coral) {
let $doc = $(document);
$doc.on('foundation-contentloaded', function (e) {
let _element = $('.cq-dialog-dropdown-showhide.dropdown-main')[0];
showHideHandler($(_element));
});
$(document).on("change", ".cq-dialog-dropdown-showhide", function(e) {
showHideHandler($(this));
resetChild();
});
function showHideHandler(_this) {
let desktopData = init();
for(let i=0; i<desktopData.children.length; i++){
let grandChildren = $(desktopData.children[i]).find("coral-select-item");
for (let j=0; j<=desktopData.index; j++){
grandChildren[j].removeAttribute("disabled");
}
for(let j=desktopData.index+1; j<grandChildren.length; j++){
grandChildren[j].setAttribute("disabled", true);
}
}
}
function resetChild() {
let desktopData = init();
let tabletChildren = $(desktopData.children[0]).find("coral-select-item");
let mobileChildren = $(desktopData.children[1]).find("coral-select-item");
let tabletSelectedIndex = Array.prototype.findIndex.call(tabletChildren, ele => ele.hasAttribute('selected'));
let mobileSelectedIndex = Array.prototype.findIndex.call(mobileChildren, ele => ele.hasAttribute('selected'));
if(desktopData.index < tabletSelectedIndex){
tabletChildren[tabletSelectedIndex].removeAttribute("selected");
tabletChildren[0].setAttribute("selected", true);
}
if(desktopData.index < mobileSelectedIndex){
mobileChildren[mobileSelectedIndex].removeAttribute("selected");
mobileChildren[0].setAttribute("selected", true);
}
}
function init () {
let desktopData = {};
let mother = $('coral-select.dropdown-main');
let elementChildren = $(mother).find('coral-select-item');
desktopData.index = Array.prototype.findIndex.call(elementChildren, ele => ele.hasAttribute('selected'));
desktopData.children = $('coral-select.dropdown-child');
return desktopData;
}
})(document, Granite.$, Coral);
XML,
<rapidColumnConfigDesktop
granite:class="cq-dialog-dropdown-showhide tab-show-hide-select dropdown-main"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Column Layout for Desktop"
name="./rapidColumnConfigDesktop">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-dropdown-showhide-target=".rapid-column-layout-show-hide"
tab-showhide-target=".rapid-tab-show-hide"/>
<items jcr:primaryType="nt:unstructured">
<oneColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}true"
text="1 Column Layout"
value="1"/>
<twoColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="2 Column Layout"
value="2"/>
<threeColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="3 Column Layout"
value="3"/>
<fourColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="4 Column Layout"
value="4"/>
<fiveColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="5 Column Layout"
value="5"/>
<sixColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="6 Column Layout"
value="6"/>
</items>
</rapidColumnConfigDesktop>
<rapidColumnConfigTablet
granite:class="dropdown-child"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Column Layout for Tablet"
name="./rapidColumnConfigTablet">
<items jcr:primaryType="nt:unstructured">
<oneColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}true"
text="1 Column Layout"
value="1"/>
<twoColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="2 Column Layout"
value="2"/>
<threeColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="3 Column Layout"
value="3"/>
<fourColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="4 Column Layout"
value="4"/>
<fiveColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="5 Column Layout"
value="5"/>
<sixColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="6 Column Layout"
value="6"/>
</items>
</rapidColumnConfigTablet>
<rapidColumnConfigMobile
granite:class="dropdown-child"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Column Layout for Mobile"
name="./rapidColumnConfigMobile">
<items jcr:primaryType="nt:unstructured">
<oneColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}true"
text="1 Column Layout"
value="1"/>
<twoColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="2 Column Layout"
value="2"/>
<threeColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="3 Column Layout"
value="3"/>
<fourColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="4 Column Layout"
value="4"/>
<fiveColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="5 Column Layout"
value="5"/>
<sixColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="6 Column Layout"
value="6"/>
</items>
</rapidColumnConfigMobile>
Hope this will help you to modify it.
Hi,
I think the same principles that are applied to any of the below resources will work in your scenario, you just need to:
- Create a custom javascript that will run on dialog-ready
- Then you will add a listener onChange for the 1st dropdown,
- Once the event triggers (meaning your 1st dropdown change) you will execute any validation or logic you need via JS.
Examples:
https://adapttoaem.blogspot.com/2021/02/setting-dynamic-dropdownselect-value-in.html
Hope this helps
Hello @satishpothabathula ,
For your requirement, you can add a custom clientlib. To help or hints you can follow this JS, where after selecting the 1st dropdown other select field options are disabled. Where your requirement is just to hide.
Code Sinppet,
(function (document, $, Coral) {
let $doc = $(document);
$doc.on('foundation-contentloaded', function (e) {
let _element = $('.cq-dialog-dropdown-showhide.dropdown-main')[0];
showHideHandler($(_element));
});
$(document).on("change", ".cq-dialog-dropdown-showhide", function(e) {
showHideHandler($(this));
resetChild();
});
function showHideHandler(_this) {
let desktopData = init();
for(let i=0; i<desktopData.children.length; i++){
let grandChildren = $(desktopData.children[i]).find("coral-select-item");
for (let j=0; j<=desktopData.index; j++){
grandChildren[j].removeAttribute("disabled");
}
for(let j=desktopData.index+1; j<grandChildren.length; j++){
grandChildren[j].setAttribute("disabled", true);
}
}
}
function resetChild() {
let desktopData = init();
let tabletChildren = $(desktopData.children[0]).find("coral-select-item");
let mobileChildren = $(desktopData.children[1]).find("coral-select-item");
let tabletSelectedIndex = Array.prototype.findIndex.call(tabletChildren, ele => ele.hasAttribute('selected'));
let mobileSelectedIndex = Array.prototype.findIndex.call(mobileChildren, ele => ele.hasAttribute('selected'));
if(desktopData.index < tabletSelectedIndex){
tabletChildren[tabletSelectedIndex].removeAttribute("selected");
tabletChildren[0].setAttribute("selected", true);
}
if(desktopData.index < mobileSelectedIndex){
mobileChildren[mobileSelectedIndex].removeAttribute("selected");
mobileChildren[0].setAttribute("selected", true);
}
}
function init () {
let desktopData = {};
let mother = $('coral-select.dropdown-main');
let elementChildren = $(mother).find('coral-select-item');
desktopData.index = Array.prototype.findIndex.call(elementChildren, ele => ele.hasAttribute('selected'));
desktopData.children = $('coral-select.dropdown-child');
return desktopData;
}
})(document, Granite.$, Coral);
XML,
<rapidColumnConfigDesktop
granite:class="cq-dialog-dropdown-showhide tab-show-hide-select dropdown-main"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Column Layout for Desktop"
name="./rapidColumnConfigDesktop">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-dropdown-showhide-target=".rapid-column-layout-show-hide"
tab-showhide-target=".rapid-tab-show-hide"/>
<items jcr:primaryType="nt:unstructured">
<oneColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}true"
text="1 Column Layout"
value="1"/>
<twoColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="2 Column Layout"
value="2"/>
<threeColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="3 Column Layout"
value="3"/>
<fourColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="4 Column Layout"
value="4"/>
<fiveColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="5 Column Layout"
value="5"/>
<sixColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="6 Column Layout"
value="6"/>
</items>
</rapidColumnConfigDesktop>
<rapidColumnConfigTablet
granite:class="dropdown-child"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Column Layout for Tablet"
name="./rapidColumnConfigTablet">
<items jcr:primaryType="nt:unstructured">
<oneColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}true"
text="1 Column Layout"
value="1"/>
<twoColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="2 Column Layout"
value="2"/>
<threeColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="3 Column Layout"
value="3"/>
<fourColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="4 Column Layout"
value="4"/>
<fiveColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="5 Column Layout"
value="5"/>
<sixColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="6 Column Layout"
value="6"/>
</items>
</rapidColumnConfigTablet>
<rapidColumnConfigMobile
granite:class="dropdown-child"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Column Layout for Mobile"
name="./rapidColumnConfigMobile">
<items jcr:primaryType="nt:unstructured">
<oneColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}true"
text="1 Column Layout"
value="1"/>
<twoColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="2 Column Layout"
value="2"/>
<threeColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="3 Column Layout"
value="3"/>
<fourColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="4 Column Layout"
value="4"/>
<fiveColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="5 Column Layout"
value="5"/>
<sixColumnLayout
jcr:primaryType="nt:unstructured"
selected="{Boolean}false"
text="6 Column Layout"
value="6"/>
</items>
</rapidColumnConfigMobile>
Hope this will help you to modify it.