custom html js code

 
1
0
-1

i put a js code inside custom html but it does not running correctly 

i use a downloaded joget at my windows 

this is the code 

<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 
    </head>
    <body>
        
<script type="text/javascript">
    $(document).ready(function() {
        // Function to update options in the second select box
        function updateSelectBox2() {
            var selectedValue = $('#to').val();
            $('#approversList option').show(); // Show all options initially
            $('#approversList option').each(function() {
                if ($(this).val() === selectedValue) {
                    $(this).hide(); // Hide the selected value from selectBox1
                }
            });
        }

        // Event listener for changes in the first select box
        $('#to').change(function() {
            updateSelectBox2();
        });

        // Initial call to update selectBox2 on page load
        updateSelectBox2();
    });
</script>
    </body>
</html>

    CommentAdd your comment...

    2 answers

    1.  
      2
      1
      0

      Hi, 
      i suppose this is related to this :

      select box value
      You can remove everything above the <script> and the code must be altered.
      See here : 

      <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>

      You can also see the sample app to explore and adjust further : 
      APP_hideValue-1-20240807024025.jwa

      Thank you.

      1. Nihal Sabbarini

        thank you so much 

      CommentAdd your comment...
    2.  
      2
      1
      0

      Hi, what errors are you getting? You need to check the browser developer console to identify what the JavaScript errors are before you can debug it.

      1. Nihal Sabbarini

        it works now 

        thank you so much 

      CommentAdd your comment...