检查多个下拉列表的值后的事件

Question

我对 Jquery / Javascript 的了解非常有限。我遇到了一个代码，该代码显示/隐藏添加到购物车按钮和 Joomla、Virtuemart 产品页面上的闪烁消息，具体取决于作为下拉列表的自定义字段的选择。在具有单个自定义字段的产品页面上，一切正常。只有当用户选择默认值以外的其他内容时，闪烁的消息才会消失并且添加到购物车按钮会出现。请看这里：https://leathercareland.com/en/leather-care-peripoiisi-dematos/proionta-saphir-saphir-products/pommadier-creme-gl-76-detail。在具有多个自定义字段的产品页面上，如果用户在任何下拉菜单中做出选择，则会显示添加到购物车。请看这里：https://leathercareland.com/en/leather-care-peripoiisi-dematos/vafes-ypodimaton-kai-dermatinon-eidon-shoe-and-leather-dyes/starter-set-big-detail。我需要修改提供的代码，以便只有当用户在每个下拉列表上做出选择以显示添加到卡片按钮时，才会在具有多个下拉列表的页面上。代码如下：

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

我知道我需要检查每个下拉列表中的值，但我无法以编程方式执行此操作....

有没有人 he/she 可以提供帮助或提供可能示例的想法？

谢谢乔治

Answer 1

您可以使用 .each 循环遍历 select，然后检查每个 select 的值，如果值匹配 COM_VIRTUEMART_PLEASE_CHOOSE 或 COM_VIRTUEMART_PLEASE_CHOOSE_LAST隐藏购物车 div 否则显示相同。

演示代码 :

$('.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>

Answer 2

非常感谢您对 Swati 的回答，很抱歉我没有彻底测试我的代码，并在此处发布了正确答案和错误答案……再次抱歉。我最终所做的是采用您的代码并进行一些小的更改，如下所示：在 $('.product-fields select').on('change', function() 之前我添加了

$('.addtocart-bar').hide(); 
$('.flash').show();
var $select = $(this);

所以它用 false 初始化并定义 select 我得到一个未定义的变量。我还在需要的地方添加了一些括号和分号，所以我的最终代码是：

  <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;
    });
    
    $('.addtocart-bar').hide(); 
    $('.flash').show();
    var $select = $(this);
    $('.product-fields select').on('change', function() {
        var flag = true; //set flag
        //hide..add to cart
        $('.addtocart-bar').hide(); 
        $('.flash').show();
        //console.log($select.val());
        //loop through select
    $('.product-fields select').each(function() {
        //if value is please choose
            if (($(this).val() === 'COM_VIRTUEMART_PLEASE_CHOOSE') || ($(this).val() == 'COM_VIRTUEMART_CHOOSE_LAST')) {
                flag = false //set flag false
            }
        })
    if (flag == true) {
        $('.addtocart-bar').show();
        $('.flash').hide();
        } 
    });

});
</script>

真的很抱歉再次感谢乔治

检查多个下拉列表的值后的事件

Event after check values of multiple dropdown lists

javascript

php

jquery

joomla