Форум

Alexodiy · #1 (**permalink**) 22.09.2017, 21:48

Доброго времени суток.

Имеем такую 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 опция. Как сделать так, чтобы скрипт отрабатывал вывод блока во время загрузки или после загрузки страницы?

рони · #2 (**permalink**) 22.09.2017, 21:54

Alexodiy,
а можно классы вместо style?

Alexodiy · #3 (**permalink**) 22.09.2017, 22:01

Можно классы, если проще будет, главное что в зависимости от выбранной опции, а опция может быть выбрана другая и их может быть больше, там с пхп связано, но отображать или нет тут на помощь js приходит

рони · #4 (**permalink**) 22.09.2017, 22:07

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>

Alexodiy · #5 (**permalink**) 24.09.2017, 19:32

Спасибо огромное.

Alexodiy · #6 (**permalink**) 24.09.2017, 19:43

А вы можете еще подсказать? Если например мы имеем аналогичную ситуацию, только вместо блоков мы имеем 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

рони · #7 (**permalink**) 24.09.2017, 20:28

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>

Alexodiy · #8 (**permalink**) 24.09.2017, 21:32

Ясность полная, но в форме много <input type="checkbox" />, как сделать для определенной группы, ато в форме все инпуты выделятся начинают

рони · #9 (**permalink**) 24.09.2017, 21:37

Alexodiy,
придумать класс для инутов
hide = document.querySelectorAll('.Ваш_класс');
или обернуть их одним элементом с классом
и тогда hide = document.querySelectorAll('.Ваш_класс input');

Kramer778 · #10 (**permalink**) 16.02.2023, 10:20

Сообщение от рони

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>

Доброго времени суток. Подскажите пожалуйста. А можно сделать, чтобы выбор сохранялся при обновление страницы? Например, если выбрать "Вторая опция", этот выбор был сохранен на всех страницах сайта, до тех пор пока не изменить его, ну или не очистить куки.

Форум

Справочник

Discord чат

Курсы javascript