Блог

Главная - Вопросы по программированию - JavaScript для скрытия и отображения формы с помощью опции выбора

JavaScript для скрытия и отображения формы с помощью опции выбора

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть formOne и formTwo в опции выбора. Код JavaScript для скрытия двух форм и, если я выберу formOne для отображения formOne , если я выберу formTwo для отображения formOne и formTwo .

 function changeOptions(selectEl) {
  let selectedValue = selectEl.options[selectEl.selectedIndex].value;
  let subForms = document.getElementsByClassName('OLevelResult')
  for (let i = 0; i < subForms.length; i  = 1) {
    if (selectedValue === subForms[i].name) {
      subForms[i].setAttribute('style', 'display:block')
    } else {
      subForms[i].setAttribute('style', 'display:none')
    }
  }
}  
 <select onchange="changeOptions(this)">
  <option value="form_1">1</option>
  <option value="form_2">2</option>
</select>

<form class="OLevelResult" name="form_1" id="form_1" style="display:none">
  THIS IS FORM 1
  <!---- THIS IS FORM 1---->
</form>

<form class="OLevelResult" name="form_2" id="form_2" style="display:none">
  THIS IS FORM 2
  <!---- THIS IS FORM 2---->
</form>

Комментарии:

1. Я думаю, что ваш код работает нормально. С какой проблемой вы столкнулись?

2. кажется, это работает, единственное, что я рекомендую, это добавлять и удалять классы css вместо манипулирования прямыми атрибутами

3. да, работает нормально, но я хочу отображать form1 и form2 вместе, если выбрать 2

Ответ №1:

 function changeOptions(selectEl) {
  let subForms = document.getElementsByClassName('OLevelResult')
  for (let i = 0; i < subForms.length; i  = 1) {
    if (selectEl === subForms[i].name) {
      for(let j=i; j>-1 ;j--) {
        subForms[j].classList.add("active");
      }
    } else {
      subForms[i].classList.remove("active");
    }
  }
}  
 .OLevelResult {
display: none;
}
.OLevelResult.active {
display: block;
}  
 <select onchange="changeOptions(this.value)">
  <option value="">select</option>
  <option value="form_1">1</option>
  <option value="form_2">2</option>
  <option value="form_3">3</option>
  <option value="form_4">4</option>
</select>

<form class="OLevelResult" name="form_1" id="form_1">
  THIS IS FORM 1
  <!---- THIS IS FORM 1---->
</form>

<form class="OLevelResult" name="form_2" id="form_2">
  THIS IS FORM 2
  <!---- THIS IS FORM 2---->
</form>

<form class="OLevelResult" name="form_3" id="form_3">
  THIS IS FORM 3
  <!---- THIS IS FORM 1---->
</form>

<form class="OLevelResult" name="form_4" id="form_4">
  THIS IS FORM 4
  <!---- THIS IS FORM 2---->
</form>

Комментарии:

1. да, работает нормально, но я хочу отобразить form1 и form 2, если выбрать 2. спасибо

2. Вы хотите, чтобы javascript был необходим? Мы можем попробовать это с помощью jQuery