hide dropdown options of a field in a component based on placement in different template page

[Jyo234678]

based on page sling resource type we need to hide a field dropdown options . Can anyone help me with java script code for this?

Tried this

<image-type jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/select"
            fieldLabel="Image(s) Type"
            name="./imageType">
                   <granite:data jcr:primaryType="nt:unstructured"
                                 resourceType="${pageProperties.sling:resourceType}"/>
    <items jcr:primaryType="nt:unstructured">
       <option-1 jcr:primaryType="nt:unstructured"
                 text="Single Landscape Image"
                 value="{Long}1"
                 selected="{Boolean}true"/>
       <option-7 jcr:primaryType="nt:unstructured"
                 text="Single Portrait Image"
                 value="{Long}7"/>
       <option-2 jcr:primaryType="nt:unstructured"
                 text="Two Landscape Images"
                 value="{Long}2"/>
       <option-3 jcr:primaryType="nt:unstructured"
                 text="Two Portrait Images"
                 value="{Long}3"/>
       <option-4 jcr:primaryType="nt:unstructured"
                 text="One Portrait (left side) and Two Landscape Images (right side)"
                 value="{Long}4"/>
       <option-5 jcr:primaryType="nt:unstructured"
                 text="Two Landscape Images (left side) and One Portrait(right side)"
                 value="{Long}5"/>
       <option-6 jcr:primaryType="nt:unstructured"
                 text="Four Landscape Images"
                 value="{Long}6"/>
       <option-8 jcr:primaryType="nt:unstructured"
                 text="Expanded Size - 1 landscape image"
                 value="{Long}8"/>
       <option-9 jcr:primaryType="nt:unstructured"
                 text="Expanded Size - 2 landscape images"
                 value="{Long}9"/>
       <option-10 jcr:primaryType="nt:unstructured"
                  text="Expanded Size - 2 portrait images"
                  value="{Long}10"/>
       <option-11 jcr:primaryType="nt:unstructured"
                  text="Expanded Size - 1 portrait image (left side) with 2 small landscape images (right side)"
                  value="{Long}11"/>
       <option-12 jcr:primaryType="nt:unstructured"
                  text="Expanded Size - 2 small landscape images (left side) with 1 portrait image (right side)"
                  value="{Long}12"/>
       <option-13 jcr:primaryType="nt:unstructured"
                  text="Expanded Size - 4 landscape images"
                  value="{Long}13"/>
    </items>
</image-type>

document.addEventListener("DOMContentLoaded", function() {
    var resourceType = document.querySelector("[name='./imageType'] [data-resourceType]").dataset.resourceType;
    if (resourceType === "msi-occ/components/structure/pressreleasepage") {
        var options = document.querySelectorAll("[name='./imageType'] coral-select-item");
        options.forEach(function(option) {
            var value = parseInt(option.value, 10);
            if (value >= 8 && value <= 13) {
                option.style.display = "none";
            }
        });
    }
});

TIA 

[DPrakashRaj]

Can you try to debug your code by putting either debugger or putting console.log to check if your Java script is getting executed as per expectation and the variables are having the expected values to do the hide and show?

[EstebanBustamante]

Hi @Jyo234678 

It looks like you duplicated your question here: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/hide-dropdown-options-of-a... Can you please close this thread to keep consistency and avoid duplication?

Thanks