Event after check values of multiple dropdown lists

My knowledge of Jquery / Javascript is very limited. I got stuck with a code that shows / hides the add to cart button and a blinking message on the product page of Joomla, Virtuemart depending on the choices of the custom fields which are dropdown lists. On the product page that has a single custom field everything works just fine. Only when the user selects something other than the default value the blinking message disappears and the add to cart button appears. Please see here : https://leathercareland.com/en/leather-care-peripoiisi-dematos/proionta-saphir-saphir-products/pommadier-creme-gl-76-detail. On the product page that has multiple custom fields if a user makes a choice in any of the dropdowns then the add to cart appears. Please see here : https://leathercareland.com/en/leather-care-peripoiisi-dematos/vafes-ypodimaton-kai-dermatinon-eidon-shoe-and-leather-dyes/starter-set-big-detail. I need to modify the provided code so that on the page that has multiple dropdown lists only when the user has made a choice on every dropdown list to have the add to card button appear. The code is as follows:

<script>
    jQuery(document).ready(function ($) {

        function blink() { 
          $('.blink_slow').fadeOut(500).fadeIn(500, blink); 
        }
        blink();
        
        $(".tab-content").not(':first').css("display", "none");
        $("ul.tabs li:first").addClass("active");

        $("ul.tabs a").click(function(event) {
            event.preventDefault();
            $(this).parent().addClass("active");
            $(this).parent().siblings().removeClass("active");
            var tab = $(this).attr("href");
            $(".tab-content").not(tab).css("display", "none");
            $(tab).fadeIn();
        });
        $('.quickadd').parent().click(
            function() { 
                var btn = $(this),href = btn.find('a').eq(0).attr('href'),
                    dat = $(this).closest('form').serialize();
                window.parent.vmQuickAdd(dat);

                return false;
        });
        $('.product-fields select').each(function(){
            var $select = $(this);
             //console.log($select.val());
                    
            if(($select.val() === 'COM_VIRTUEMART_PLEASE_CHOOSE') || ($select.val() === 'COM_VIRTUEMART_PLEASE_CHOOSE_LAST')){
                $('.addtocart-bar').hide(); 
                $select.change(function(){
                    if(($select.val() === 'COM_VIRTUEMART_PLEASE_CHOOSE') || ($select.val() === 'COM_VIRTUEMART_PLEASE_CHOOSE_LAST')) {
                        $('.addtocart-bar').hide();
                        $('.flash').show(); }

                    else { $('.addtocart-bar').show(); $('.flash').hide();}
                });
            }
            
        });

    });
</script>

I know that I need to check for values on every dropdown list but I cannot do that programmatically....

Is there any one out there that he/she can help or give me ideas with possible examples?

Thanks George

Solution

You can use .each loop to iterate through your select and then check value of each selects and if value matches COM_VIRTUEMART_PLEASE_CHOOSE or COM_VIRTUEMART_PLEASE_CHOOSE_LAST hide the cart div else show same.

Demo Code :

$('.product-fields select').on("change", function() {
  var flag = true; //set flag
  //hide..add to cart
  $('.addtocart-bar').hide();
  $('.flash').show();
  //loop through select
  $('.product-fields select').each(function() {
    //if value is please choose
    if ($(this).val() == "COM_VIRTUEMART_PLEASE_CHOOSE" || $(this).val() == "COM_VIRTUEMART_PLEASE_CHOOSE_LAST") {
      flag = false //set flag flase
    }
  })
  if (flag == true) {
    $('.addtocart-bar').show();
    $('.flash').hide();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-short-description">

  <div class="product-fields">
    <select>
      <option value="COM_VIRTUEMART_PLEASE_CHOOSE" selected="selected">Please choose</option>
      <option value="BLACK">BLACK</option>
      <option value="WHITE">WHITE</option>
    </select>
    <select>
      <option value="COM_VIRTUEMART_PLEASE_CHOOSE" selected="selected">Please choose</option>
      <option value="BLACK">BLACK</option>
      <option value="WHITE">WHITE</option>
      <option value="RED">RED</option>
    </select>
    <select>
      <option value="COM_VIRTUEMART_PLEASE_CHOOSE_LAST" selected="selected">Please choose</option>
      <option value="WHITE">WHITE</option>
      <option value="RED">RED</option>
      <option value="BLACK">BLACK</option>
    </select>
    <div class="flash" style="display: block;">
      Please make your choice(s) from the list above so that you could add the product to the cart.
    </div>
    <div class="addtocart-bar" style="display: none;">
      Your cart here
    </div>
  </div>