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.
71 lines
2.6 KiB
71 lines
2.6 KiB
2 years ago
|
// Define a cache object to store selected option data
|
||
|
const selectCache = {};
|
||
|
|
||
|
// Function to update the cache with the selected option data for a given select element
|
||
|
function updateSelectCache(select) {
|
||
|
const selectedOption = select.options[select.selectedIndex];
|
||
|
const image = selectedOption.getAttribute('data-image');
|
||
|
const name = selectedOption.textContent.trim();
|
||
|
selectCache[select.id] = { image, name };
|
||
|
}
|
||
|
|
||
|
// Function to set the selected option and associated image and name for a given select element
|
||
|
|
||
|
|
||
|
function setSelectData(select) {
|
||
|
const selectedOption = select.options[select.selectedIndex];
|
||
|
const image = selectedOption.getAttribute('data-image') || 'https://dummyimage.com/20x20/000/fff'; // set a default image URL
|
||
|
const name = selectedOption.textContent.trim();
|
||
|
if (image) {
|
||
|
select.style.backgroundImage = `url(${image})`;
|
||
|
select.nextElementSibling.querySelector('.select-image').src = image;
|
||
|
} else {
|
||
|
select.style.backgroundImage = '';
|
||
|
select.nextElementSibling.querySelector('.select-image').src = '';
|
||
|
}
|
||
|
select.nextElementSibling.querySelector('.select-name').textContent = name;
|
||
|
updateSelectCache(select);
|
||
|
}
|
||
|
|
||
|
|
||
|
// Function to get the selected option data from cache for a given select element
|
||
|
function getSelectData(select) {
|
||
|
return selectCache[select.id] || {};
|
||
|
}
|
||
|
|
||
|
// Update all custom select elements on the page
|
||
|
const selects = document.querySelectorAll('.custom-select .select');
|
||
|
selects.forEach((select) => {
|
||
|
// Set the initial select data based on the cached data (if available) or the selected option (if any)
|
||
|
const cachedData = getSelectData(select);
|
||
|
if (cachedData.image) {
|
||
|
select.style.backgroundImage = `url(${cachedData.image})`;
|
||
|
select.nextElementSibling.querySelector('.select-image').src = cachedData.image;
|
||
|
}
|
||
|
if (cachedData.name) {
|
||
|
select.nextElementSibling.querySelector('.select-name').textContent = cachedData.name;
|
||
|
}
|
||
|
if (select.selectedIndex >= 0) {
|
||
|
setSelectData(select);
|
||
|
}
|
||
|
|
||
|
// Add event listener to update select data when an option is selected
|
||
|
select.addEventListener('change', () => {
|
||
|
setSelectData(select);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
// Hide the select image and name on page load
|
||
|
const selectIcons = document.querySelectorAll('.custom-select .select-icon');
|
||
|
const selectImages = document.querySelectorAll('.custom-select .select-image');
|
||
|
const selectNames = document.querySelectorAll('.custom-select .select-name');
|
||
|
selectIcons.forEach((icon) => {
|
||
|
icon.style.display = 'none';
|
||
|
});
|
||
|
selectImages.forEach((image) => {
|
||
|
image.style.display = 'none';
|
||
|
});
|
||
|
selectNames.forEach((name) => {
|
||
|
name.style.display = 'none';
|
||
|
});
|