javascript - 有没有办法用 JavaScript 隐藏表单的各个部分？

Question

我正在尝试构建一个动态的表单。我已经构建了表单部分。在表单的标题中，有一个下拉选项，其中有五个选项与表单的五个部分相关。我想隐藏所有部分，直到选择下拉选项，显示相关部分。

我正在尝试在没有 Jquery 的情况下执行此操作，因为我正在尝试提高我的 javascript 技能

    <label for="issueDescInput">Date of Requests</label>
        <br>
     <input type="date" class="form-control" id="issueSeverityInput">
        <br>

        <label for="TOR">Tasks</label>
         <select class="form-control" id="issueSeverityInput">
          <option value="CO">Task 1</option>
          <option value="ASM">task 2</option>
          <option value="SM">task 3</option>
          <option value="AM">Task 4</option>
          <option value="RC">Task 5</option>
        </select>

       <div class="Tasks-section">
        <div class="Task 1">

      <p>test</p>

       </div>  
       </div>

     var select = document.getElementById('TOR'),
     onChange = function(event) {
    var shown = this.options[this.selectedIndex].value == "SM";

    document.getElementById('hidden_div').style.display = shown ? 'block' 
  : 'none';
};

标签： javascriptforms

Answer 1

我认为您可以使用纯 javascript 查看此示例，我已经制作了Codepen：

对 HTML 进行了轻微更改，以使事情变得更容易。

https://codepen.io/DieByMacro/pen/arKaRX

(function() {
  const selectOption = document.querySelector('#issueSeverityInput');
  const tasks = document.querySelectorAll('.task-section');
  const cssVisible = 'is-visible';
  
  // Add select onChange event handler
  selectOption.addEventListener('change', onChangeHandler );
  
  // Calling trigger to check current selected value and update at first time
  triggerSelect();
  
  function triggerSelect() {
    // Get the current selected at first load
    const currentSelect = selectOption[selectOption.selectedIndex].value
    
    // Update the task
    updateCurrentTask(currentSelect)
  }
  
  function updateCurrentTask(value) {
    // Find the correct task to update by adding/removing CSS `is-visible` class
    for(const task of tasks) {
      if (task.getAttribute('data-value') === value ) {
        task.classList.add(cssVisible)
      } else task.classList.remove(cssVisible)
    }
  }
  
  function onChangeHandler(event) {
    console.log('Selected: ', event.currentTarget.value);
    updateCurrentTask(event.currentTarget.value);
  }
})();

/*
We init the task-section by hiding it. Then later we will use js to toggle class `is-visible` 
*/
.task-section {
  display: none;
}
.task-section.is-visible {
  display: block;
}

<label for="TOR">Tasks</label>
<select class="form-control" id="issueSeverityInput">
  <option value="1">Task 1</option>
  <option value="2">task 2</option>
  <option value="3">task 3</option>
  <option value="4">Task 4</option>
  <option value="5">Task 5</option>
</select>

<div class="tasks-wrapper">
  <div class="task-section" data-value="1">
    <p>This is task 1</p>
  </div>
  <div class="task-section" data-value="2">
    <p>This is task 2</p>
  </div>
  <div class="task-section" data-value="3">
    <p>This is task 3</p>
  </div>
  <div class="task-section" data-value="4">
    <p>This is task 4</p>
  </div>
  <div class="task-section" data-value="5">
    <p>This is task 5</p>
  </div>
</div>