CODEWITHSUNDEEP
javascriptjqueryhtml-select
sandiie
sandiie

Reputation: 11

display number of elements depending on option selected

I'm trying to add a 3rd filter to track/display the number of elements shown depending on the option selected (#filter9). This is what I have so far, I got the code from: Filter based on combination of multiple select and single select elements.

This is what i'm trying to edit: 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();
   });


});

Upvotes: 0

Views: 736

Answers (1)

lukesUbuntu
lukesUbuntu

Reputation: 517

Here is working demo just a basic filter to apply filter9 on how many li elements to show https://jsfiddle.net/xd2482f6/6/

Instead of pasting all your code which you can get from the JS fiddler i will just add in changes made.

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

Then from the filter9 selection we can just show how many li results to show when doing the fadein.

  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");
        })
    }

Upvotes: 1

Related Questions