How to implement dependent filtering blocks?

Lads, help me, please.

5e4bf65fdfc61084733698.png

There's this html:

<section class="inputs">
 <div class="input input--quantity">
 <select class="select filter__quantity" name="filter__quantity">
 <option selected="selected">Number of classes</option>
 <option value='100занятий'>100 classes</option>
 <option value='36занятий'>36 classes</option>
 <option value='18занятий'>18 lessons</option>
 <option value='rasoloarison'>single use</option>
</select>
</div>
 <div class="input input--email">
 <select class="select filter__email" name="filter__email">
 <option selected="selected">validity</option>
 <option value='1year'>1 year</option>
 <option value='6 months'>6 months</option>
 <option value='1 month'>1 month</option>
</select>
</div>
 <div class="input input--time">
 <select class="select filter__time" name="filter__time">
 <option selected="selected">Time facilities</option>
 <option value='morning'>morning</option>
 <option value='evening'>evening</option>
</select>
</div>
 <div class="input input--type">
 <select class="select filter__type" name="filter__type">
 <option selected="selected">Type section</option>
 <option value='water'>water</option>
</select>
</div>
 <div class="input input--category">
 <select class="select filter__category" name="filter__category">
 <option selected="selected">Category coach</option>
 <option value='master'>master</option>
 <option value='Pro'>Pro</option>
</select>
</div>
 </section>


Blocks are added via ajax and the dynamic attributes are also dynamically added.
Filtering decided to make across attributes, as the data come in Russian language. Using classes will not work.

That is. here is the implementation for a single select(and it works):

select1.onchange = function() {
 for (let i = 0; i < blocks.length; i++) {
 if (blocks[i].getAttribute('Kolichestvennyi') === this.value.replace(' ', ")) {
 blocks[i].style.display = 'block';
 } 
 else {
 blocks[i].style.display = 'none';
}
 if (this.value === 'Number of classes') {
 blocks[i].style.display = 'block';
}
}
};


The question is how to link the choice of this select with the rest. So they don't vzaimoisklyuchayut each other.
April 7th 20 at 15:42
1 answer
April 7th 20 at 15:44
Solution
here is a primitive example, I hope it will be useful, then we need to understand how blocks are loaded and where they need then to hide.
@Stacy, Thanks, I implemented your method and it worked)))and you have been writing in js? - Abbey_Hermiston commented on April 7th 20 at 15:59
@Asia, 3 years already - Sigrid.Mosciski commented on April 7th 20 at 16:02
Thank you very much, now I understand your example. If I can ask for the code? - Abbey_Hermiston commented on April 7th 20 at 15:47
@Asia, Yes, no problem - Sigrid.Mosciski commented on April 7th 20 at 15:50
@Stacy, I'm trying to implement your code, everything seems clear. adapted for your situation. But. there is one serwotka. I can't understand why I have not triggered the method Array.from.
I mean, without him, I'm getting a HTMLCollection, and displays a list of items. But for this collection as methods for arrays are not suitable.

Once add this method prints an empty array. I do not know what could be the reason?? 've tried everything. Array.prototype.slice.call the same paranoiac - []. - Abbey_Hermiston commented on April 7th 20 at 15:53
@Asia, Array.from should work now in all browsers except IE. Rewrote the code pins (available at the same link) to use Array.prototype.slice.call and also it works - it should work in all browsers. In Addition To The Array.prototype.slice.call you can try to use var arr = [].slice.call(htmlCollection); or var arr = [...htmlCollection]; and the effect should be the same.

If there are any errors with the Array.prototype.slice.call, the issue is probably not in the Array.from, and somewhere in other place and we must look and understand. - Sigrid.Mosciski commented on April 7th 20 at 15:56

Find more questions by tags JavaScript