根据选择的选项显示元素数量答案

【问题标题】：display number of elements depending on option selected根据选择的选项显示元素数量
【发布时间】：2015-06-15 21:23:41
【问题描述】：

我正在尝试添加第三个过滤器来跟踪/显示根据所选选项 (#filter9) 显示的元素数量。这是我目前所拥有的，我的代码来自：Filter based on combination of multiple select and single select elements。

这是我要编辑的内容：https://jsfiddle.net/sandiie/xd2482f6/

<select id='filter7'>
    <option>Purchase Date</option>
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">March</option>
</select>

<select id="filter8" >
   <option value="photo"> Photos</option>
   <option value="video"> Videos</option>
   <option value="all" > all</option>
</select>

<select id="filter9" >
   <option value="items1"> 1</option>
   <option value="items2"> 2</option>
   <option value="items4" > all</option>
</select>


<ol id="list">
   <li class=" post item jan photo all">Jan photo</li>
   <li class="post item feb photo all">Feb photo</li>
   <li class=" post item mar photo">March photo</li>
   <li class="post item jan photo">Jan photo</li>
   <li class="post item feb photo">feb photo</li>

   <li class="post item jan video">Jan video</li>
   <li class="item vid feb">Feb video</li>
   <li class="item vid mar">March video</li>
   <li class="item vid jan">Jan video</li>
</ol>


jQuery(document).ready(function ($) {

   var values = [7, 8];

   $("select").on("change", function () {

       var showAll = true,
           show = [],
           joined;

       $.each(values, function (index, id) {
           var $el = $('#filter' + id),
               multi = $el.attr('multiple'),
               val = $el.val();

           if (multi) {
               if (val !== null) {
                   showAll = false;
                   $.each(val, function (i, v) {
                       show.push( v );
                   });
               }
           } else {
               if (val != 'all') {
                   showAll = false;
                   show.push( val );
               }
           }


       });

       console.log(showAll);
       console.log(show);

       if (showAll) {
           //show all items 
           $(".item").fadeIn("fast");
       } else {

           joined = '.' + show.join('.');

           console.log( joined );

           $(".item").hide();
           $( joined ).fadeIn("fast");
       }

   });

   $.each(values, function (index, id) {
       $('#filter' + id).chosen();
   });


});

【问题讨论】：

问题是……？
#filter9 ，如何根据所选选项仅显示一个/两个/所有元素
@sandiie filter9 的意思是要显示多少？
是的，我希望能够根据选择的 filter9 中的选项来选择显示多少 li，但保留 filter7 和 filter8。

标签： javascript jquery select options

【解决方案1】：

这是一个工作演示，只是一个基本过滤器，用于将 filter9 应用于要显示 https://jsfiddle.net/xd2482f6/6/ 的 li 元素的数量

我不会粘贴您可以从 JS fiddler 获得的所有代码，而是添加所做的更改。

<select id="filter9" >
    <option value="-1" > all</option>
   <option value="1"> 1</option>
   <option value="2"> 2</option>
</select>

然后从 filter9 选择中，我们可以只显示在进行淡入时要显示多少 li 结果。

  if (showAll) {
        //show all items 
        $(".item").fadeIn("fast");
    } else {

        joined = '.' + show.join('.');

        console.log( joined );
        //how many results to show
        var amount_to_show = parseInt($("#filter9").val())

        $(".item").hide();
        $( joined ).each(function(i,element){

            if (amount_to_show != -1 && i > (amount_to_show - 1)) return true;

            $(element).fadeIn("fast");
        })
    }

【讨论】：