Например, есть список городов, у которых есть атрибут data-city.
<select>
<option data-city="Москва" class="city">Москва</option>
<option data-city="Санкт-Петербург" class="city">Санкт-Петербург</option>
<option data-city="Новосибирск" class="city">Новосибирск</option>
</select>
<option data-city="Москва" class="city">Москва</option>
<option data-city="Санкт-Петербург" class="city">Санкт-Петербург</option>
<option data-city="Новосибирск" class="city">Новосибирск</option>
</select>
Скрипт для получения атрибута data-city при клике с помощью js
<script>
document.querySelector('[data-city]').addEventListener('click', function() {
let city = this.dataset.city;
console.log(city);
});
</script>
document.querySelector('[data-city]').addEventListener('click', function() {
let city = this.dataset.city;
console.log(city);
});
</script>
Получения атрибута data-city для динамических элементов
<script>
document.addEventListener('click', function(e) {
if (e.target.hasAttribute('data-city')) {
let city = e.target.dataset.city;
console.log('Город:', city);
}
});
</script>
document.addEventListener('click', function(e) {
if (e.target.hasAttribute('data-city')) {
let city = e.target.dataset.city;
console.log('Город:', city);
}
});
</script>
Получения атрибута для элементов с классом
<script>
document.querySelectorAll('.city').forEach(element => {
element.addEventListener('click', function() {
let city = this.getAttribute('data-city');
console.log(city);
});
});
</script>
document.querySelectorAll('.city').forEach(element => {
element.addEventListener('click', function() {
let city = this.getAttribute('data-city');
console.log(city);
});
});
</script>
С сохранением в куки при клике
<script>
document.addEventListener('click', function(e) {
let cityElement = e.target.closest('[data-city]');
if (cityElement) {
let city = cityElement.dataset.city;
// Сохраняем в куки
let date = new Date();
date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = `city=${encodeURIComponent(city)}; expires=${date.toUTCString()}; path=/`;
console.log('Выбран город:', city);
// Если нужно перезагрузить страницу
location.reload();
}
});
</script>
document.addEventListener('click', function(e) {
let cityElement = e.target.closest('[data-city]');
if (cityElement) {
let city = cityElement.dataset.city;
// Сохраняем в куки
let date = new Date();
date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = `city=${encodeURIComponent(city)}; expires=${date.toUTCString()}; path=/`;
console.log('Выбран город:', city);
// Если нужно перезагрузить страницу
location.reload();
}
});
</script>
Нужен ведущий на праздник? Никита Бедретдинов. Ведущий на свадьбу и корпоратив в Москве
