Отображение элемента в зависимости от выбора select
Доброго времени суток.
Имеем такую HTML структуру:
<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 id="hidden_div1" style="display:none;">Для первого селекта</div>
<div id="hidden_div2" style="display:none;">Для второго селекта</div>
<div id="hidden_div3" style="display:none;">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>
Задача чтобы в зависимости от выбора опции селекта отображался нужный блок, реализуем с помощью JS:
document.getElementById('main').addEventListener('change', function () {
var style = this.value == "one" ? 'display' : 'none';
document.getElementById('hidden_div1').style.display = style;
var style = this.value == "two" ? 'display' : 'none';
document.getElementById('hidden_div2').style.display = style;
var style = this.value == "three" ? 'display' : 'none';
document.getElementById('hidden_div3').style.display = style;
});
Вот этот же код в песочнице - https://jsfiddle.net/alexodiy/904597e7/17/ По умолчанию у нас выбрана 3 опция. Как сделать так, чтобы скрипт отрабатывал вывод блока во время загрузки или после загрузки страницы? |
Alexodiy,
а можно классы вместо style? |
Можно классы, если проще будет, главное что в зависимости от выбранной опции, а опция может быть выбрана другая и их может быть больше, там с пхп связано, но отображать или нет тут на помощь js приходит
|
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>
|
Спасибо огромное.
|
А вы можете еще подсказать? Если например мы имеем аналогичную ситуацию, только вместо блоков мы имеем input
<select id="main" name="main" class="main_field" aria-required="true">
<option value="one">
Отметить все
</option>
<option value="two">
Выбрать несколько
</option>
</select>
<hr>
<label><input type="checkbox"/> описание 1</label>
<br>
<label><input type="checkbox" checked disabled /> описание 2</label>
<br>
<label><input type="checkbox" /> описание 3</label>
<br>
<label><input type="checkbox" /> описание 4</label>
Вот в песочнице https://jsfiddle.net/0wa9tyet/2/ Как сделать так, что при выборе селекта с опцией Отметить все, у нас ко всем инпутам добавлялось checked + disabled, а при выборе Выбрать несколько чекбоксы становились пустыми без checked и disabled |
Alexodiy,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var select = document.querySelector('#main'),
hide = document.querySelectorAll('[type="checkbox"]');
function change()
{
[].forEach.call(hide, function(el) {
el.removeAttribute('disabled');
el.checked = false;
if(select.value == 'one') {
el.checked = true;
el.setAttribute('disabled', 'disabled');
}
});
}
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>
</select>
<hr>
<label><input type="checkbox"/> описание 1</label>
<br>
<label><input type="checkbox" checked disabled /> описание 2</label>
<br>
<label><input type="checkbox" /> описание 3</label>
<br>
<label><input type="checkbox" /> описание 4</label>
</body>
</html>
|
Ясность полная, но в форме много <input type="checkbox" />, как сделать для определенной группы, ато в форме все инпуты выделятся начинают
|
Alexodiy,
придумать класс для инутов hide = document.querySelectorAll('.Ваш_класс'); или обернуть их одним элементом с классом и тогда hide = document.querySelectorAll('.Ваш_класс input'); |
Цитата:
|
| Часовой пояс GMT +3, время: 19:16. |