jQuery 获取多个 select 列表中最后选择的选项的值

Question

The site has a filtering of products (WordPress+WC), there is a small script that, when you select a filter, displays a div-block with a "Show" button. I need to be displayed the div block near the last selected filter.

This code works, but it displays the last selected option (filter) based on its location in the DOM, ie if you select the last filter first and then the first, it will show the div next to the last, not the first option. If select filters sequentially, from top to bottom, then its works as intended

Also tried something like this:

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

result exactly the same

 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

Here is a start

I had to clean up the code to be able to refactor it

 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>