有没有一种方法可以用JavaScript隐藏表单的各个部分？

时间：2019-05-27 15:57:35

标签： javascript forms

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

我正在尝试在没有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';
};

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

JavaScript
当前的JS有几个问题：

问题＃1
 事件上的属性需要通过点符号后缀添加到对象，并且必须小写。逗号运算符仅包含select的声明，然后失败。

var select = document.getElementById('TOR'), 
onChange = function(event) {...

首先声明一个变量以引用DOM对象，然后使用点表示法将事件属性绑定到该变量。

var select = document.getElementById('TOR');
select.onchange = function(event) {...

问题＃2
 我假设下一行是分配当前选定选项的值，因为下一行使用它...有点...我认为。无论如何，==都是用于比较两个松散类型的值（这意味着字符串"3"可以被鸭子类型转换为数字3）。在五种可能性中仅分配一个值会破坏使用选择的目的。 

var shown = this.options[this.selectedIndex].value == "SM";

可以直接访问选择以获取当前选择的选项的值。变量的使用和重用是编程中的重要且基本的范例。因此，重复使用您已有的东西。请注意，未分配特定值（“ SM” ），而是将 任何要选择的值 分配给{{1} }。 

shown

问题＃3
最后一行在语法上是正确的，但却是错误的，因为它掩盖了其余代码的结尾。引用#id本身就可以，但是具有多个用途相似且设计应相似的标签。类和表单名称属性应用于组。 var shown = select.value; 可用于将多个标签收集到称为NodeLists或HTML Collections的组中（它们之间略有不同）。既然您具有表单，下面的演示将使用一些专门用于表单标签和form controls的特殊Web API。这是演示中所用内容的参考列表，演示中逐行注释了发生的详细信息：

OP代码进行了大量更改（除了基本功能以外，几乎所有其他功能。）值得注意的是，为了使用通用值来提高效率和灵活性，选项值已更改为索引号。

演示 
<form>
// Reference the form
const main = document.forms.main;
/*
Collect all form controls into a NodeList (input, output,
textarea, select, button, fieldset) nested within form#main.
*/
const x = main.elements;
/*
A - Pass Event Object 
B - Get the value of select#TOR (e.target always points to the
    clicked, changed, hovered, etc tag) and convert it into a real
    number.
C - Collect all form controls [name=tasks] into a NodeList    
    (x.tasks).
D - Loop through the NodeList and remove .show class from each 
    tag of NodeList (fieldset[name=tasks])
E - if the value from line #B is NOT -1...
F - Assign class .show to the fieldset within the NodeList at the
    indexed position of the value from line #B
*/
function menu(e) { //A
  const selected = Number(e.target.value); //B
  const tasks = x.tasks; //C

  for (let t = 0; t < tasks.length; t++) { //D
    tasks[t].classList.remove('show'); //D
  }
  if (selected != -1) { //E
    tasks[selected].classList.add('show'); //F
  }
}

// Register select#TOR to the change event, menu() is the callback
x.TOR.onchange = menu;
:root {
  font: 700 2.5vw/1.2 Verdana;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

#main {
  width: 100vw;
  height: 100vh;
}

section.task {
  position: relative;
  min-width: 300px;
  height: 100vh;
  margin: 0 auto;
  padding: 5vh 2vw;
}

fieldset.task {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 85%;
  margin: 2vh auto 5vh 1vw;
  visibility: collapse;
  transform: scaleY(0);
  transform-origin: top;
}

fieldset.task.show {
  z-index: 1;
  visibility: visible;
  transform: scaleY(1);
  transition: 0.4s transform ease-out
}

input,
output,
select,
button {
  display: inline-block;
  font: inherit;
  height: 6vh;
  line-height: 6vh;
  vertical-align: middle;
  padding: 0 3px
}

#date0 {
  height: 7vh;
  line-height: 7vh;
  width: 30vw;
}

#TOR {
  height: 8vh;
  line-height: 8vh;
}

相关问题
最新问题