Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.09.2017, 21:48
Интересующийся
Отправить личное сообщение для Alexodiy Посмотреть профиль Найти все сообщения от Alexodiy
 
Регистрация: 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 опция. Как сделать так, чтобы скрипт отрабатывал вывод блока во время загрузки или после загрузки страницы?
Ответить с цитированием
  #2 (permalink)  
Старый 22.09.2017, 21:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Alexodiy,
а можно классы вместо style?
Ответить с цитированием
  #3 (permalink)  
Старый 22.09.2017, 22:01
Интересующийся
Отправить личное сообщение для Alexodiy Посмотреть профиль Найти все сообщения от Alexodiy
 
Регистрация: 22.09.2017
Сообщений: 26

Можно классы, если проще будет, главное что в зависимости от выбранной опции, а опция может быть выбрана другая и их может быть больше, там с пхп связано, но отображать или нет тут на помощь js приходит
Ответить с цитированием
  #4 (permalink)  
Старый 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>
Ответить с цитированием
  #5 (permalink)  
Старый 24.09.2017, 19:32
Интересующийся
Отправить личное сообщение для Alexodiy Посмотреть профиль Найти все сообщения от Alexodiy
 
Регистрация: 22.09.2017
Сообщений: 26

Спасибо огромное.
Ответить с цитированием
  #6 (permalink)  
Старый 24.09.2017, 19:43
Интересующийся
Отправить личное сообщение для Alexodiy Посмотреть профиль Найти все сообщения от Alexodiy
 
Регистрация: 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
Ответить с цитированием
  #7 (permalink)  
Старый 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>
Ответить с цитированием
  #8 (permalink)  
Старый 24.09.2017, 21:32
Интересующийся
Отправить личное сообщение для Alexodiy Посмотреть профиль Найти все сообщения от Alexodiy
 
Регистрация: 22.09.2017
Сообщений: 26

Ясность полная, но в форме много <input type="checkbox" />, как сделать для определенной группы, ато в форме все инпуты выделятся начинают
Ответить с цитированием
  #9 (permalink)  
Старый 24.09.2017, 21:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Alexodiy,
придумать класс для инутов
hide = document.querySelectorAll('.Ваш_класс');
или обернуть их одним элементом с классом
и тогда hide = document.querySelectorAll('.Ваш_класс input');
Ответить с цитированием
  #10 (permalink)  
Старый 16.02.2023, 10:20
Новичок на форуме
Отправить личное сообщение для Kramer778 Посмотреть профиль Найти все сообщения от Kramer778
 
Регистрация: 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>
Доброго времени суток. Подскажите пожалуйста. А можно сделать, чтобы выбор сохранялся при обновление страницы? Например, если выбрать "Вторая опция", этот выбор был сохранен на всех страницах сайта, до тех пор пока не изменить его, ну или не очистить куки.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не корретная работа выбора элемента в динамическом <select> CTABP Элементы интерфейса 3 19.09.2017 15:24
Изменение цвета элемента в зависимости от id элемента на координате deniskutovskiy Events/DOM/Window 10 10.10.2015 11:43
Вывод информации в зависимости от выбранных значений select Batyabest Events/DOM/Window 1 01.10.2014 05:20
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
html код в зависимости от выбора radio Findail Общие вопросы Javascript 6 30.03.2013 12:53