Сообщение от рони
|
Alexodiy,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide{
display:none;
}
.hide.show{
display: block;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var select = document.querySelector('#main'),
hide = document.querySelectorAll('.hide');
function change()
{
[].forEach.call(hide, function(el) {
var add = el.classList.contains(select.value) ? "add" : "remove"
el.classList[add]('show');
});
}
select.addEventListener('change', change);
change()
});
</script>
</head>
<body>
<select id="main" name="main" class="main_field" aria-required="true">
<option value="one">
Первая опция
</option>
<option value="two">
Вторая опция
</option>
<option value="three" selected="selected">
Третья опция
</option>
</select>
<hr>
<div class="hide one">Для первого селекта</div>
<div class="hide two">Для второго селекта</div>
<div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>
</body>
</html>
|
Доброго времени суток. Подскажите пожалуйста. А можно сделать, чтобы выбор сохранялся при обновление страницы? Например, если выбрать "Вторая опция", этот выбор был сохранен на всех страницах сайта, до тех пор пока не изменить его, ну или не очистить куки.