<?php
$translate = $this->plugin('translate');
?>
<form class="filtering" action="">
    <select class="filtering-select">
        <option value=""><?php echo $translate('No filter') ?></option>
        <?php foreach ($filters as $filter): ?>
        <?php $selected = $this->params()->fromQuery($filter['value']) ? 'selected' : ''; ?>
        <option value="<?php echo $this->escapeHtml($filter['value']); ?>"<?php echo $selected; ?>><?php echo $this->escapeHtml($filter['label']); ?></option>
        <?php endforeach; ?>
    </select>
    <input type="hidden" class="filtering-input">
    <button type="submit"><?php echo $translate('Filter'); ?></button>
    <?php
    $removeQueries = array_column($filters, 'value');
    $removeQueries[] = 'page';
    echo $this->queryToHiddenInputs($removeQueries);
    ?>
</form>

<script>
$('form.filtering').submit(function(e) {
    // Set the selected filter value to the hidden input before submit.
    var thisForm = $(this);
    var filter = thisForm.find('.filtering-select').val();
    thisForm.find('.filtering-input').attr('name', filter).val(1);
});
</script>
