<section class="guide-menu fluid" style="padding: 0">
<h5 class="section-heading">ФИЛЬТРЫ</h5>
<style>
select{
border-radius: 5px;
border: 0;
background: #444;
color: #fff;
padding: 5px;
margin: 5px 25px;
width: 155px;
}
button{
border-radius: 5px;
border: 0;
background: #444;
color: #fff;
padding: 5px;
margin: 5px 25px;
width: 155px;
}
</style>
<select data-category="year">
<option>Все годы</option>
<% page.urls.years.forEach(function(year) { %>
<option value="<%= year.title %>"><%- year.title %></option>
<% }); %>
</select>
<br>
<select data-category="genre">
<option>Все жанры</option>
<% page.urls.genres.forEach(function(genre) { %>
<option value="<%= genre.title %>"><%- genre.title %></option>
<% }); %>
</select>
<br>
<select data-category="country">
<option>Все страны</option>
<% page.urls.countries.forEach(function(country) { %>
<option value="<%= country.title %>"><%- country.title %></option>
<% }); %>
</select>
</section>
<button onClick="filter ()">ПРИМЕНИТЬ</a></button>
<script>
let HREF = [];
["year", "genre", "country"].forEach(function (cat_genre) {
var cat = document.querySelector('[data-category="' + cat_genre + '"]');
cat.onchange = function (event) {
var v = event.target.value;
var c = cat.dataset.category;
var r = new RegExp(c + "=[^\&]*?", "ig");
var page = window.location.href.replace(r, "");
HREF['page'] = page;
switch (c) {
case "year":
if (v != "Все годы") {
HREF['year'] = (page.indexOf("?") + 1 ? "&" : "?") + c + "=" + v;
}
break;
case "genre":
if (v != "Все жанры") {
HREF['genre'] = (page.indexOf("?") + 1 ? "&" : "?") + c + "=" + v;
}
break;
case "country":
if (v != "Все страны") {
HREF['country'] = (page.indexOf("?") + 1 ? "&" : "?") + c + "=" + v;
}
break;
};
};
});
function filter () {
var url = "";
if (HREF['year']) {
url = HREF['year'];
};
if (HREF['genre']) {
url = url + HREF['genre'];
};
if (HREF['country']) {
url = url + HREF['country'];
};
console.log(HREF['page'] + url);
window.location.href = (HREF['page'] + url);
HREF = [];
}
</script>