55 lines
1.5 KiB
HTML
Executable file
55 lines
1.5 KiB
HTML
Executable file
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Селект</title>
|
|
<script src='http://code.jquery.com/jquery.min.js'></script>
|
|
<link rel="stylesheet" href="customselect.css"/>
|
|
<script src="customselect.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div>Последний результат: <span id="result">...</span></div>
|
|
|
|
<img src="http://js.cx/clipart/select-button.gif">
|
|
|
|
<div id="animal-select" class="customselect">
|
|
<div class="customselect-title">Выберите</div>
|
|
<ol class="customselect-options">
|
|
<!-- значение хранится в свойстве 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>
|
|
</ol>
|
|
</div>
|
|
|
|
<div id="food-select" class="customselect">
|
|
<div class="customselect-title">Выберите</div>
|
|
<ol class="customselect-options">
|
|
<li data-value="carnivore">Плотоядные</li>
|
|
<li data-value="herbivore">Травоядные</li>
|
|
<li data-value="omnivore">Всеядные</li>
|
|
</ol>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
// создаём два селекта
|
|
var animalSelect = new CustomSelect({
|
|
elem: $('#animal-select')
|
|
});
|
|
|
|
var foodSelect = new CustomSelect({
|
|
elem: $('#food-select')
|
|
});
|
|
|
|
// выводим выбранное значение
|
|
$([animalSelect, foodSelect]).on('select', function (event) {
|
|
$('#result').html(event.value)
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|