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.
You can use the following script in a custom HTML field:
<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"
Figure 1: approver_1
Figure 2: approver_2
In runtime, you can see "Cat" does not appear in the Approver 2 select box.
Figure 3: Runtime
Download the sample app below:
