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

based on page sling resource type we need to hide few  field dropdown options . Can anyone help me with java script code for this? I tried but it seems not working .

<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";
            }
        });
    }
});