54 lines
No EOL
1.5 KiB
HTML
Executable file
54 lines
No EOL
1.5 KiB
HTML
Executable file
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Селект</title>
|
|
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
|
|
<link rel="stylesheet" href="customselect.css" />
|
|
<!-- для вашего кода -->
|
|
<script src="customselect.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div>Последний результат: <span id="result">...</span></div>
|
|
|
|
<div id="animal-select" class="customselect">
|
|
<button class="title">Выберите</button>
|
|
<ul>
|
|
<!-- значение хранится в свойстве data-value -->
|
|
<li data-value="bird">Птицы</li>
|
|
<li data-value="fish">Рыбы</li>
|
|
<li data-value="animal">Звери</li>
|
|
<li data-value="dino">Динозавры</li>
|
|
<li data-value="simplest">Одноклеточные</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="food-select" class="customselect">
|
|
<button class="title">Выберите</button>
|
|
<ul>
|
|
<li data-value="carnivore">Плотоядные</li>
|
|
<li data-value="herbivore">Травоядные</li>
|
|
<li data-value="omnivore">Всеядные</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
var animalSelect = new CustomSelect({
|
|
elem: document.getElementById('animal-select')
|
|
});
|
|
|
|
var foodSelect = new CustomSelect({
|
|
elem: document.getElementById('food-select')
|
|
});
|
|
|
|
document.addEventListener('select', function(event) {
|
|
document.getElementById('result').innerHTML = event.detail.value;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |