1

У меня такой код, когда выбираю один из элементов select, показывает или скрывает ниже представленных блоков:

function Selected(a) {
  var label = a.value;
  if (label == 1) {
    document.getElementById("Block1").style.display = 'block';
  } else if (label == 2) {
    document.getElementById("Block1").style.display = 'none';
  }
}
<select id="actSelect" class="Validate_Required " name="actSelect" aria-required="true" onChange="Selected(this)">
  <option value="" selected="selected">-</option>
  <option value="1">Пункт 1</option>
  <option value="2">Пункт 2</option>
  <option value="3">Пункт 3</option>
</select>


<div id='Block1' style='display: none;'>
  Пункт 1
</div>

<div id='Block2' style='display: none;'>
  Пункт 2
</div>

<div id='Block3' style='display: none;'>
  Пункт 3
</div>

Никак не могу сделать тоже самое при загрузке страницы. Допустим Пункт 2 selected ( <option value="2" selected>Пункт 2</option>), как сделать так, чтобы при загрузке страницы работал js код (else if (label==2) )?

1 ответ 1

-1

Чтобы заставить выполнить событие принудительно без "дотрагивания" до селекта, достаточно вызвать его .onchange();

function Selected(a) {
    var label = a.value;
  
    if (label == 1) {
        document.getElementById("Block1").style.display = 'block';
        document.getElementById("Block2").style.display = 'none';
    } else if (label == 2) {
        document.getElementById("Block1").style.display = 'none';
        document.getElementById("Block2").style.display = 'block'; // Для теста
    }
}

function onDocumentReady() {
    document.querySelectorAll('#actSelect option').forEach((item) => {  
      if (item.value == 2)
          item.selected = 'selected';
    });

    document.querySelector('#actSelect').onchange();
}

document.addEventListener("DOMContentLoaded", onDocumentReady);
<select id="actSelect" class="Validate_Required " name="actSelect" aria-required="true" onChange="Selected(this)">
  <option value="">-</option>
  <option value="1">Пункт 1</option>
  <option value="2">Пункт 2</option>
  <option value="3">Пункт 3</option>
</select>


<div id='Block1' style='display: none;'>
  Пункт 1
</div>

<div id='Block2' style='display: none;'>
  Пункт 2
</div>

<div id='Block3' style='display: none;'>
  Пункт 3
</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.