Скрыть кнопку пока не выбран селект
Здравствуйте!
Как сделать, что пока пользователь не выберет какое-нибудь значение в select (name="len") блок <div class="variations_button"> будет скрыт? Заранее спасибо! |
Deymos,
<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8' />
<style>
.bl {
display: none;
}
</style>
</head>
<body>
<select name="sel" id="sel">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<div id="toShow" class="variations_button bl">Hello, I am hidden block</div>
<script>
var sel = document.getElementById('sel');
sel.addEventListener('change', function (event) {
if(this.value) document.getElementById('toShow').classList.remove('bl');
})
</script>
</body>
</html>
|
супер круто, спасибо! А как сделать, что если переходим к пункту "Не выбрано" - автоматически все скрывается опять?:help:
|
Deymos,
<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8' />
<style>
.bl {
display: none;
}
</style>
</head>
<body>
<select name="sel" id="sel">
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<div id="toShow" class="variations_button bl">Hello, I am hidden block</div>
<script>
var sel = document.getElementById('sel');
sel.addEventListener('change', function (event) {
if(this.value) { document.getElementById('toShow').classList.remove('bl') } else {
document.getElementById('toShow').classList.add('bl')
};
})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 23:47. |