<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<select id="read-taxonomy-select">
<option value="__all">Show All</option>
</select>
jQuery(document).ready(function($) {
var $dropdown = $('#read-taxonomy-select');
var optionsHtml = ''; // Store options here to append later
// Extract categories from Elementor filter buttons, skipping "ALL" (data-filter="*")
$('.read-taxonomy button.e-filter-item').each(function() {
var optionText = $(this).text().trim(); // Get button text
var optionAttr = $(this).attr('data-filter'); // Get data-filter attribute
// Skip "ALL" filter (data-filter="__all")
if (optionAttr && optionAttr !== "__all") {
console.log(optionAttr);
optionsHtml += '<option value="' + optionAttr + '">' + optionText + '</option>';
}
});
// Append options dynamically after "ALL" (so "ALL" stays first)
$dropdown.append(optionsHtml);
// Trigger Elementor AJAX filter when dropdown changes
$dropdown.change(function() {
var selectedFilter = $(this).val();
if (selectedFilter) {
$('.read-taxonomy button.e-filter-item[data-filter="' + selectedFilter + '"]').trigger('click');
} else {
// If "ALL" is selected, trigger the first filter button (adjust if needed)
$('.read-taxonomy button.e-filter-item:first').trigger('click');
}
});
});
