Introduction

In this article. we will show you how to hide a value in the second select box based on the chosen value in the first select box.

Implementation

You can use the following script in a custom HTML field in a form:

<script>
$(document).ready(function(){
    // Get references to the select boxes
    var approver1 = (document.getElementsByName("approver_1"))[0];
    var approver2 = (document.getElementsByName("approver_2"))[0];
    
    // Add change event listener to the select box
    approver1.addEventListener("change", function() {
        updateApprover2Options(approver1,approver2);
    });
    
    // Initial call to set the correct options on page load
    updateApprover2Options(approver1,approver2);
})


// Function to update approver2 options based on approver_1 selection
function updateApprover2Options(approver1,approver2) {
    var selectedValue = approver1.value;
 
    // Loop through approver2 options to hide/show based on approver1 selection
    for (var i = 0; i < approver2.options.length; i++) {
        var option = approver2.options[i];
        
        // reset each option display incase of new value update
        option.style.removeProperty('display');
        
        // apply the hide display here
        if (option.value === selectedValue) {
            console.log("hiding value "+option.value+" : "+selectedValue);
            option.style.display = 'none'; // Hide the option
        }
    }
}

</script>

Make sure to have 2 select boxes in the form with the following id "approver_1" and "approver_2"