Dynamically Hide Selected Value from First Select Box in Second Select Box

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.

How does it work?

1. In Form Builder, add a Select Box form element to a form and configure its Properties, enter Label as 'Approver 1', ID as 'approver_1', select 'User' for or Load Data From and select 'Joget.Org' for Select Organization.
2. Add another Select Box into the form with same configuration except the Label as 'Approver 2' and ID as 'approver_2'.
3. Drag and drop a Custom HTML element into the form.  
4. Click the Custom HTML element. In the Custom HTML property, enter the following script: 

   <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;
       
       // reset selectbox2 selection (so they cant choose option A in sb1, and still have option A in sb2)
       // $("[name=approver_2]").removeAttr("selected"); // not working, joget handles selectbox selection differently compared to vanilla
   
       // 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>

   Markup

   Copy
5. Save and Launch to view the fields.

Expected Outcome

In runtime, you can see "Cat" does not appear in the Approver 2 select box after being selected in Approver 1.

Download sample app