How to hide a specific picklist value in a visualforce page

Question

I want to hide a specific picklist value(Closed) in the field stage (having picklist values- Open, Processing, Closed) the following code works fine for deleting first value.

However I am unable to delete second or third pick list value even though changing the position of id, any idea?

<apex:inputField value="{!Sales__c.Stage__c}" id="st">
<script type="text/javascript">
      (function(){
           var e = document.querySelectorAll('[id$="st"]')[0];
               if (e && !e[0].value) {e.remove(0);}
             })();
</script>

Answer 1

If the Closed satus will always be at the same position (i.e. third position), you can just call: e.remove(2); (the remove method expect the index position as parameter)

If you prefer to remove the option depending on its label (if the position can be changed), you can call:

  var inputStatus=document.querySelectorAll('[id$="st"]')[0];
  for (var i=0; i<inputStatus.length; i++){
     if (inputStatus.options[i].value == 'Closed' )
        inputStatus.remove(i);
     }
  }

Answer 2

Finding by index is bad as you may also have none as an option.

Use below code if you'd like to remove the picklist option based on value:

<apex:page id="page">

    <apex:form id="form">
        <apex:selectList size="1" id="selectList">
            <apex:selectOption itemLabel="Open" itemValue="Open"/>
            <apex:selectOption itemLabel="Processing" itemValue="Processing"/>
            <apex:selectOption itemLabel="Closed" itemValue="Closed"/>
        </apex:selectList>

        <script>
            (function() {
                // select DOM element
                var selectobject = 
                    document.getElementById('{!$Component.page.form.selectList}');

                // iterate over option
                for (var i=0; i<selectobject.length; i++) {
                    // remove closed option matching its value
                    if (selectobject.options[i].value == 'Closed' ) {
                        selectobject.remove(i);
                    }
                }
            })();
        </script>
    </apex:form>

</apex:page>

Credits goes to this post from Stackoverflow.

$Component visualforce merge field is quite handy in such scenario.

Answer 3

<apex:pageBlockSection >
                <apex:inputField value="{!Opportunity.Cancellation__c}" required="true" id="stageId"/>
                </apex:pageBlockSection>
                <script type="text/javascript">
                (function(){
                    var inputStatus = document.querySelectorAll('[id$="stageId"]')[0];
                    for (var i=1; i<inputStatus.length; i++){
                        if(inputStatus.options[i].value.includes("_SH") || inputStatus.options[i].value.includes("_S") || inputStatus.options[i].value.includes("_H"))
                        {
                          inputStatus.remove(i);
                          i--;
                        }
                     }
                })();
                </script>    **In above code if you want to use code for mpre than 1 picklist values use i-- inside if condition because every time it will reduce the values otherwise it will not work