jQuery 獲取多個 select 列表中最后選擇的選項的值

Question

該網站有一個產品過濾（WordPress+WC），有一個小腳本，當您 select 一個過濾器時，會顯示一個帶有“顯示”按鈕的 div 塊。 我需要在最后選擇的過濾器附近顯示 div 塊。

此代碼有效，但它會根據其在 DOM 中的位置顯示最后選擇的選項（過濾器），即如果您 select 首先是最后一個過濾器然后是第一個，它將顯示最后一個旁邊的 div，而不是第一個選項。 如果 select 按順序從上到下過濾，那么它會按預期工作

還嘗試過這樣的事情：

var latest_value = jQuery('[class ^= woof_checkbox_term]:checkbox:checked:last').val();
//console.log(latest_value);

結果完全一樣

 jQuery("[class ^= woof_term_]").click(function() { var arr = jQuery.map(jQuery('[class ^= woof_term_] input:checkbox:checked'), function(e, i) { return +e.value; }); //console.log(arr); function unique(list) { var result = []; jQuery.each(list, function(i, e) { if (jQuery.inArray(e, result) == -1) result.push(e); }); return result; } document.querySelectorAll("#submit-filter").forEach(el => el.remove()); var asd = jQuery('#woof_results_by_ajax').find('p.woocommerce-result-count').text().replace(/[^0-9]/gi, ''); if (asd === '' || asd === null) { jQuery('<div id="submit-filter"><span id="total-filter-count">One product</span><input type="submit" name="gofilter" class="button_filter" value="Show"></div>').insertAfter('.woof_term_' + unique(arr).slice(-1)[0]); } else { jQuery('<div id="submit-filter"><span id="total-filter-count">Selected: <b>' + parseInt(asd) + '</b></span><input type="submit" name="gofilter" class="button_filter" value="Show"></div>').insertAfter('.woof_term_' + unique(arr).slice(-1)[0]); } jQuery(".button_filter").on('click', function(event) { jQuery('html, body').animate({ scrollTop: jQuery("h1.woocommerce-products-header__title").offset().top }, 1000) document.querySelectorAll("#submit-filter").forEach(el => el.remove()); }); });

 div#submit-filter { position: absolute; width: 126px; height: 67px; left: 180px; line-height: 20px; font-size: 12px; text-align: center; z-index: 99; /*margin-top: -1px;*/ margin-top: -14px; border-radius: 0 5px 5px 5px; -moz-border-radius: 0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px; -khtml-border-radius: 0 5px 5px 5px; background-color: #fff; border: 2px solid #2c3d52; color: #2c3d52; } input.button_filter { border: none; width: auto; height: 27px; text-align: center; color: #fff; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; text-shadow: none; padding: 0 10px; display: inline-block; line-height: 27px; text-decoration: none; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -khtml-box-sizing: content-box; position: relative; overflow: visible; outline: none; cursor: pointer; -webkit-appearance: none; background: #2c3d52; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); -khtml-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="woof_term_1105 "><input type="checkbox" id="woof_1105_5f3a448442426" class="woof_checkbox_term woof_checkbox_term_1105" data-tax="type1" name="type1_f2" data-term-id="1105" value="1105"><label class="woof_checkbox_label" for="woof_1105_5f3a448442426">Filter 1<span class="woof_checkbox_count">(1)</span></label> <input type="hidden" value="filter1" data-anchor="woof_filter-1"> </li> <li class="woof_term_1114 "><input type="checkbox" id="woof_1114_5f3a448442d64" class="woof_checkbox_term woof_checkbox_term_1114" data-tax="type1" name="type1_f2" data-term-id="1114" value="1114"><label class="woof_checkbox_label " for="woof_1114_5f3a448442d64">Filter 2<span class="woof_checkbox_count">(0)</span></label> <input type="hidden" value="filter2" data-anchor="woof_filter-2"> </li> <li class="woof_term_1118 "><input type="checkbox" id="woof_1118_5f3a448448ce7" class="woof_checkbox_term woof_checkbox_term_1118" data-tax="type2" name="type2_f2" data-term-id="1118" value="1118"><label class="woof_checkbox_label " for="woof_1118_5f3a448448ce7">Filter 3<span class="woof_checkbox_count">(1)</span></label> <input type="hidden" value="filter3" data-anchor="woof_filter-3"> </li> </ul>

Answer 1

這是一個開始

我必須清理代碼才能重構它

 function unique(list) { var result = []; $.each(list, function(i, e) { if ($.inArray(e, result) == -1) result.push(e); }); return result; } $(function() { $("[class ^= woof_term_]").on("click",function() { var arr = $.map($('[class ^= woof_term_] input:checkbox:checked'), function(e, i) { return +e.value; }); $("#submit-filter").remove(); if (arr.length === 0) return; // no need to have the box if nothing is selected const asd = $('#woof_results_by_ajax').find('p.woocommerce-result-count').text().replace(/[^0-9]/gi, ''); const filterText = (asd === '' || asd === null)? "One product": 'Selected: <b>' + parseInt(asd) + '</b>' $('<div id="submit-filter"><span id="total-filter-count">' + filterText + '</span><input type="submit" name="gofilter" class="button_filter" value="Show"></div>').insertAfter(this); }); $("#terms").on("click", ".button_filter", function(event) { $("#submit-filter").remove(); $('html, body').animate({ scrollTop: $("h1.woocommerce-products-header__title").offset().top }, 1000) }); });

 div#submit-filter { position: absolute; width: 126px; height: 67px; left: 180px; line-height: 20px; font-size: 12px; text-align: center; z-index: 99; /*margin-top: -1px;*/ margin-top: -14px; border-radius: 0 5px 5px 5px; -moz-border-radius: 0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px; -khtml-border-radius: 0 5px 5px 5px; background-color: #fff; border: 2px solid #2c3d52; color: #2c3d52; } input.button_filter { border: none; width: auto; height: 27px; text-align: center; color: #fff; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; text-shadow: none; padding: 0 10px; display: inline-block; line-height: 27px; text-decoration: none; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -khtml-box-sizing: content-box; position: relative; overflow: visible; outline: none; cursor: pointer; -webkit-appearance: none; background: #2c3d52; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); -khtml-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="terms"> <li class="woof_term_1105 "><input type="checkbox" id="woof_1105_5f3a448442426" class="woof_checkbox_term woof_checkbox_term_1105" data-tax="type1" name="type1_f2" data-term-id="1105" value="1105"><label class="woof_checkbox_label" for="woof_1105_5f3a448442426">Filter 1<span class="woof_checkbox_count">(1)</span></label> <input type="hidden" value="filter1" data-anchor="woof_filter-1"> </li> <li class="woof_term_1114 "><input type="checkbox" id="woof_1114_5f3a448442d64" class="woof_checkbox_term woof_checkbox_term_1114" data-tax="type1" name="type1_f2" data-term-id="1114" value="1114"><label class="woof_checkbox_label " for="woof_1114_5f3a448442d64">Filter 2<span class="woof_checkbox_count">(0)</span></label> <input type="hidden" value="filter2" data-anchor="woof_filter-2"> </li> <li class="woof_term_1118 "><input type="checkbox" id="woof_1118_5f3a448448ce7" class="woof_checkbox_term woof_checkbox_term_1118" data-tax="type2" name="type2_f2" data-term-id="1118" value="1118"><label class="woof_checkbox_label " for="woof_1118_5f3a448448ce7">Filter 3<span class="woof_checkbox_count">(1)</span></label> <input type="hidden" value="filter3" data-anchor="woof_filter-3"> </li> </ul>