使用选择选项隐藏和显示表单的JavaScript

Question

我在select option中有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>

​

Answer 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>

​