61 lines
1.9 KiB
JavaScript
61 lines
1.9 KiB
JavaScript
// Define the function for setting up the custom select element
|
|
function setupCustomSelect(select) {
|
|
const options = select.querySelectorAll('option');
|
|
const selectIcon = select.parentElement.querySelector('.select-icon');
|
|
const selectImage = select.parentElement.querySelector('.select-image');
|
|
|
|
// Set the background image for each option that has a data-image attribute
|
|
options.forEach(option => {
|
|
const image = option.getAttribute('data-image');
|
|
if (image) {
|
|
option.style.backgroundImage = `url(${image})`;
|
|
}
|
|
});
|
|
|
|
if (select.value == '-1') {
|
|
// Set the selected option based on the stored value
|
|
const storedValue = localStorage.getItem(select.name);
|
|
if (storedValue) {
|
|
select.value = storedValue;
|
|
}
|
|
}
|
|
|
|
// Set the selected option image based on the selected value
|
|
const selectedOption = select.querySelector(`option[value="${select.value}"]`);
|
|
if (selectedOption) {
|
|
const image = selectedOption.getAttribute('data-image');
|
|
if (image) {
|
|
select.style.backgroundImage = `url(${image})`;
|
|
selectImage.src = image;
|
|
}
|
|
}
|
|
|
|
// Update the select element and image when the user makes a selection
|
|
select.addEventListener('change', () => {
|
|
const selectedOption = select.options[select.selectedIndex];
|
|
const image = selectedOption.getAttribute('data-image');
|
|
if (image) {
|
|
select.style.backgroundImage = `url(${image})`;
|
|
selectImage.src = image;
|
|
} else {
|
|
select.style.backgroundImage = '';
|
|
selectImage.src = '';
|
|
}
|
|
|
|
// Save the selected value to localStorage
|
|
localStorage.setItem(select.name, select.value);
|
|
});
|
|
|
|
// Hide the select icon and image on page load
|
|
selectIcon.style.display = 'none';
|
|
selectImage.style.display = 'none';
|
|
}
|
|
|
|
// Call the setupCustomSelect function for each custom select element
|
|
const customSelects = document.querySelectorAll('.custom-select select');
|
|
customSelects.forEach(select => {
|
|
setupCustomSelect(select);
|
|
});
|
|
|
|
|