Host-customized fork of https://github.com/tecnovert/basicswap/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.9 KiB
57 lines
1.9 KiB
2 years ago
|
// 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})`;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Set the selected option based on the stored value
|
||
|
|
const storedValue = localStorage.getItem(select.name);
|
||
|
|
if (storedValue) {
|
||
|
|
const selectedOption = select.querySelector(`option[value="${storedValue}"]`);
|
||
|
|
if (selectedOption) {
|
||
|
|
select.value = storedValue;
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
|
||
|
|
|