Hello everyone,
I’m currently working on a custom CMS filtering feature, and I’ve encountered a complex issue. I obtained a code snippet from ChatGPT that works perfectly when filtering once. However, if I attempt to filter a second time, most field options are hidden. Additionally, the filtering only works correctly when I select fields in a specific order (like first and then second). If I select them in a different order (such as last and then first, or just the middle), it doesn’t function as expected.
Could anyone offer guidance on how to resolve these issues?
Thank you!
<script>
$(document).ready(function() {
// Function to update filter options and enable/disable the filter dropdown
function updateFilterOptions(selector, options, autoSelect = false) {
$(selector).html(options);
if (options.includes('option')) {
$(selector).prop('disabled', false);
if (autoSelect && $(selector).find('option').length === 2) { // 1 option + "Select..." option
$(selector).val($(selector).find('option:eq(1)').val()).change();
}
} else {
$(selector).html('<option value="">No options available</option>').prop('disabled', true);
}
}
function getPriceRange(price) {
if (price <= 5000) return '0 - 5000';
if (price <= 10000) return '5000 - 10000';
if (price <= 15000) return '10000 - 15000';
if (price <= 20000) return '15000 - 20000';
return '20000 - 25000';
}
function createOptions(map, label) {
let options = `<option value="">Select ${label}</option>`;
map.forEach((count, key) => {
options += `<option value="${key}">${key} (${count})</option>`;
});
return options;
}
// Function to update the visibility of the listings based on selected filters
function updateListings() {
let selectedMake = $('#make-filter').val();
let selectedModel = $('#model-filter').val();
let selectedPrice = $('#price-filter').val();
let selectedFuel = $('#fuel-filter').val();
let selectedBody = $('#body-filter').val();
let selectedTransmission = $('#transmission-filter').val();
let selectedMillage = $('#millage-filter').val();
let selectedCar = $('#car-filter').val();
let totalCount = 0;
$('.collection-item.car-listing').each(function() {
let carMake = $(this).data('make');
let carModel = $(this).data('model');
let carPrice = parseInt($(this).data('price'));
let carFuel = $(this).data('fuel');
let carBody = $(this).data('body');
let carTransmission = $(this).data('transmission');
let carMillage = parseInt($(this).data('millage'));
let carStatus = $(this).data('car');
let show = true;
if (selectedMake && carMake !== selectedMake) {
show = false;
}
if (selectedModel && carModel !== selectedModel) {
show = false;
}
if (selectedPrice) {
let [minPrice, maxPrice] = selectedPrice.split('-').map(Number);
if (carPrice < minPrice || carPrice > maxPrice) {
show = false;
}
}
if (selectedFuel && carFuel !== selectedFuel) {
show = false;
}
if (selectedBody && carBody !== selectedBody) {
show = false;
}
if (selectedTransmission && carTransmission !== selectedTransmission) {
show = false;
}
if (selectedMillage) {
let maxMillage = parseInt(selectedMillage.split('-')[1]);
if (carMillage > maxMillage) {
show = false;
}
}
if (selectedCar && carStatus !== selectedCar) {
show = false;
}
if (show) {
$(this).show();
totalCount++;
} else {
$(this).hide();
}
});
$('#item-count').text(totalCount);
}
// Function to populate Make options
function populateMakeOptions() {
let makes = new Map();
$('.collection-item.car-listing').each(function() {
let make = $(this).data('make');
makes.set(make, (makes.get(make) || 0) + 1);
});
let makeOptions = createOptions(makes, 'Make');
updateFilterOptions('#make-filter', makeOptions);
let savedMake = localStorage.getItem('make-filter');
if (savedMake && makes.has(savedMake)) {
$('#make-filter').val(savedMake);
updateModelOptions(savedMake);
}
}
// Function to populate Model options based on selected Make
function updateModelOptions(selectedMake) {
let models = new Map();
$('.collection-item.car-listing').each(function() {
if ($(this).data('make') === selectedMake) {
let model = $(this).data('model');
models.set(model, (models.get(model) || 0) + 1);
}
});
let modelOptions = createOptions(models, 'Model');
updateFilterOptions('#model-filter', modelOptions, true); // Auto-select if only one option
let savedModel = localStorage.getItem('model-filter');
if (savedModel && models.has(savedModel)) {
$('#model-filter').val(savedModel);
}
updateListings();
updatePriceOptions();
}
// Function to populate Price options based on current visible listings
function updatePriceOptions() {
let prices = new Map();
$('.collection-item.car-listing:visible').each(function() {
let priceRange = getPriceRange($(this).data('price'));
prices.set(priceRange, (prices.get(priceRange) || 0) + 1);
});
let priceOptions = createOptions(prices, 'Price Range');
updateFilterOptions('#price-filter', priceOptions, true); // Auto-select if only one option
let savedPrice = localStorage.getItem('price-filter');
if (savedPrice && prices.has(savedPrice)) {
$('#price-filter').val(savedPrice);
}
updateListings();
updateFuelOptions();
}
// Function to populate Fuel options based on current visible listings
function updateFuelOptions() {
let fuels = new Map();
$('.collection-item.car-listing:visible').each(function() {
let fuel = $(this).data('fuel');
fuels.set(fuel, (fuels.get(fuel) || 0) + 1);
});
let fuelOptions = createOptions(fuels, 'Fuel Type');
updateFilterOptions('#fuel-filter', fuelOptions, true); // Auto-select if only one option
let savedFuel = localStorage.getItem('fuel-filter');
if (savedFuel && fuels.has(savedFuel)) {
$('#fuel-filter').val(savedFuel);
}
updateListings();
updateBodyOptions();
}
// Function to populate Body options based on current visible listings
function updateBodyOptions() {
let bodies = new Map();
$('.collection-item.car-listing:visible').each(function() {
let body = $(this).data('body');
bodies.set(body, (bodies.get(body) || 0) + 1);
});
let bodyOptions = createOptions(bodies, 'Body Type');
updateFilterOptions('#body-filter', bodyOptions, true); // Auto-select if only one option
let savedBody = localStorage.getItem('body-filter');
if (savedBody && bodies.has(savedBody)) {
$('#body-filter').val(savedBody);
}
updateListings();
updateTransmissionOptions();
}
// Function to populate Transmission options based on current visible listings
function updateTransmissionOptions() {
let transmissions = new Map();
$('.collection-item.car-listing:visible').each(function() {
let transmission = $(this).data('transmission');
transmissions.set(transmission, (transmissions.get(transmission) || 0) + 1);
});
let transmissionOptions = createOptions(transmissions, 'Transmission');
updateFilterOptions('#transmission-filter', transmissionOptions, true); // Auto-select if only one option
let savedTransmission = localStorage.getItem('transmission-filter');
if (savedTransmission && transmissions.has(savedTransmission)) {
$('#transmission-filter').val(savedTransmission);
}
updateListings();
updateMillageOptions();
}
// Function to populate Millage options based on current visible listings
function updateMillageOptions() {
let millages = new Map();
$('.collection-item.car-listing:visible').each(function() {
let millage = $(this).data('millage');
millages.set(millage, (millages.get(millage) || 0) + 1);
});
let millageOptions = createOptions(millages, 'Mileage');
updateFilterOptions('#millage-filter', millageOptions, true); // Auto-select if only one option
let savedMillage = localStorage.getItem('millage-filter');
if (savedMillage && millages.has(savedMillage)) {
$('#millage-filter').val(savedMillage);
}
updateListings();
updateCarOptions();
}
// Function to populate Car options based on current visible listings
function updateCarOptions() {
let cars = new Map();
$('.collection-item.car-listing:visible').each(function() {
let car = $(this).data('car');
cars.set(car, (cars.get(car) || 0) + 1);
});
let carOptions = createOptions(cars, 'Car Status');
updateFilterOptions('#car-filter', carOptions, true); // Auto-select if only one option
let savedCar = localStorage.getItem('car-filter');
if (savedCar && cars.has(savedCar)) {
$('#car-filter').val(savedCar);
}
updateListings();
}
// Function to populate all filter options initially
function populateAllFilterOptions() {
updateModelOptions($('#make-filter').val());
updatePriceOptions();
updateFuelOptions();
updateBodyOptions();
updateTransmissionOptions();
updateMillageOptions();
updateCarOptions();
}
// Initial filter population and event handling setup
populateMakeOptions();
$('#make-filter').on('change', function() {
let selectedMake = $(this).val();
localStorage.setItem('make-filter', selectedMake);
updateModelOptions(selectedMake);
});
$('#model-filter').on('change', function() {
localStorage.setItem('model-filter', $(this).val());
updateListings();
updatePriceOptions();
});
$('#price-filter').on('change', function() {
localStorage.setItem('price-filter', $(this).val());
updateListings();
updateFuelOptions();
});
$('#fuel-filter').on('change', function() {
localStorage.setItem('fuel-filter', $(this).val());
updateListings();
updateBodyOptions();
});
$('#body-filter').on('change', function() {
localStorage.setItem('body-filter', $(this).val());
updateListings();
updateTransmissionOptions();
});
$('#transmission-filter').on('change', function() {
localStorage.setItem('transmission-filter', $(this).val());
updateListings();
updateMillageOptions();
});
$('#millage-filter').on('change', function() {
localStorage.setItem('millage-filter', $(this).val());
updateListings();
updateCarOptions();
});
$('#car-filter').on('change', function() {
localStorage.setItem('car-filter', $(this).val());
updateListings();
});
// Reset filters on button click
$('#reset-filters').on('click', function() {
$('#make-filter').val('');
$('#model-filter').html('<option value="">Select Model</option>').prop('disabled', true);
$('#price-filter').val('');
$('#fuel-filter').val('');
$('#body-filter').val('');
$('#transmission-filter').val('');
$('#millage-filter').val('');
$('#car-filter').val('');
$('.collection-item.car-listing').show();
$('#item-count').text($('.collection-item.car-listing').length);
localStorage.clear();
populateMakeOptions();
});
// Initialize with default filter options
updateListings();
populateAllFilterOptions(); // Ensure all options are populated initially
$('#model-filter').prop('disabled', true);
$('#price-filter').prop('disabled', true);
$('#fuel-filter').prop('disabled', true);
$('#body-filter').prop('disabled', true);
$('#transmission-filter').prop('disabled', true);
$('#millage-filter').prop('disabled', true);
$('#car-filter').prop('disabled', true);
});
</script>
Here is my site:(filtering page)
https://globe-automotive-ee5c1e4e366029a38d3f14.webflow.io/all-cars