檢查多個下拉列表的值后的事件

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>

我知道我需要檢查每個下拉列表中的值，但我無法以編程方式執行此操作....

有沒有人可以幫助我或給我一些可能的例子的想法？

謝謝喬治

Answer 1

您可以使用.each循環遍歷您的 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

非常感謝您的回答斯瓦蒂，很抱歉我沒有徹底測試我的代碼並在此處發布為正確答案錯誤的答案....再次抱歉。 我最后做的是獲取您的代碼並進行一些小的更改，如下所示：在$('.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>

我真的很抱歉再次感謝喬治