22.09.2017, 21:48
|
Интересующийся
|
|
Регистрация: 22.09.2017
Сообщений: 26
|
|
Отображение элемента в зависимости от выбора 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 опция. Как сделать так, чтобы скрипт отрабатывал вывод блока во время загрузки или после загрузки страницы?
|
|
22.09.2017, 21:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
Alexodiy,
а можно классы вместо style?
|
|
22.09.2017, 22:01
|
Интересующийся
|
|
Регистрация: 22.09.2017
Сообщений: 26
|
|
Можно классы, если проще будет, главное что в зависимости от выбранной опции, а опция может быть выбрана другая и их может быть больше, там с пхп связано, но отображать или нет тут на помощь js приходит
|
|
22.09.2017, 22:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
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>
|
|
24.09.2017, 19:32
|
Интересующийся
|
|
Регистрация: 22.09.2017
Сообщений: 26
|
|
Спасибо огромное.
|
|
24.09.2017, 19:43
|
Интересующийся
|
|
Регистрация: 22.09.2017
Сообщений: 26
|
|
А вы можете еще подсказать? Если например мы имеем аналогичную ситуацию, только вместо блоков мы имеем 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
|
|
24.09.2017, 20:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
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>
|
|
24.09.2017, 21:32
|
Интересующийся
|
|
Регистрация: 22.09.2017
Сообщений: 26
|
|
Ясность полная, но в форме много <input type="checkbox" />, как сделать для определенной группы, ато в форме все инпуты выделятся начинают
|
|
24.09.2017, 21:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
Alexodiy,
придумать класс для инутов
hide = document.querySelectorAll('.Ваш_класс');
или обернуть их одним элементом с классом
и тогда hide = document.querySelectorAll('.Ваш_класс input');
|
|
16.02.2023, 10:20
|
Новичок на форуме
|
|
Регистрация: 16.02.2023
Сообщений: 5
|
|
Сообщение от рони
|
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>
|
Доброго времени суток. Подскажите пожалуйста. А можно сделать, чтобы выбор сохранялся при обновление страницы? Например, если выбрать "Вторая опция", этот выбор был сохранен на всех страницах сайта, до тех пор пока не изменить его, ну или не очистить куки.
|
|
|
|