选择后显示和隐藏表单的字段

正如您所发现的，html 页面中的元素永远不应该具有相同的 id，html 表单中的不同输入元素不应该具有相同的名称。

假设你想留在原版javascript的世界里，不想使用javascript框架（例如angular，ember），你可以通过设置元素的内部html来实现这一点。这样，"隐藏"html 就不会出现在 html 标记中。

像...

<script>
  function hide () {
    console.log("whatever")
  }
  function visibilite1(_this) {
    var formgroup1 = '<div id="test1" class="divs"><label>Name </label><input type="text" name= "name" id= "name" required>  </br><label>User name </label><input type="text" name= "username" id= "username"  required></br><label >Password <em>*</em></label><input type="password"   name= "password" id= "password" required></br></div>'
    var formgroup2 = '<div id="test2" class="divs"><label>Name </label><input type="text" name= "name" id= "name" required><label>User name </label><input type="text" name= "username" id= "username"  required><label>Password <em>*</em></label><input type="password"   name= "password" id= "password" required><input type="text" name= "username" id= "username"  required><label>Adress<em>*</em></label><input type="text"   name= "adress" id= "adress" required></div>'
    var formtestElement = document.getElementById('formtest'); 
    if (_this.value == "test1") {
      formtestElement.innerHTML = formgroup1
    } else if (_this.value == "test2") {
      formtestElement.innerHTML = formgroup2
    };
  }
</script>
<select name="role" id="role"
  onchange="visibilite1(this);hide()" >
  <option value='test1'>Year1</option>
  <option value='test2'>Year2</option>
</select>
<div id="formtest">
  <div id="test1" class="divs">
    <label>Name </label>
    <input type="text" name="name" id="name" required>  </br>
    <label>User name </label>
    <input type="text" name="username" id="username" required></br>
    <label>Password <em>*</em></label>
    <input type="password" name="password" id="password" required></br>
  </div>
</div>

更新：已编辑以默认显示 test1 表单。

另一种方法是克隆元素并在显示/隐藏时将正确的元素放入表单中。在窗口 onload 事件中，我将选择设置为所需的索引，然后克隆并保存元素，从表单中删除隐藏的元素。更改时，我删除了可见元素并添加了选定的元素。

var divsCloned = [];
function visibilite1(_this) {
  if (divsCloned.length == 0) {
    return;
  }
  var currDiv = document.getElementsByTagName('div')[0];
  _this.parentNode.removeChild(currDiv);
  _this.parentNode.insertBefore(divsCloned[_this.selectedIndex], _this.nextSibling);
}
window.onload = function() {
  var divs = document.getElementsByTagName('div');
  for (var no = 0; no < divs.length; no++) {
    divsCloned.push(divs[no].cloneNode(true));
    if (no != 0 && divs[no].parentNode) {
      divs[no].parentNode.removeChild(divs[no]);
    }
  }
}

<form>
    <select name="role" id="role"
            onchange="visibilite1(this);">
        <option value='test1'>Year1</option>
        <option value='test2'>Year2</option>
    </select>
    <div id="test1" class="divs">
        <label>Name </label>
        <input type="text" name="name" id="name" required>  </br>
        <label>User name </label>
        <input type="text" name="username" id="username" required></br>
        <label>Password <em>*</em></label>
        <input type="password" name="password" id="password" required></br>
    </div>
    <div id="test2" class="divs">
        <label>Name </label>
        <input type="text" name="name" id="name" required>
        <label>User name </label>
        <input type="text" name="username" id="username" required>
        <label>Password <em>*</em></label>
        <input type="password" name="password" id="password" required>
        <input type="text" name="username" id="username" required>
        <label>Adress<em>*</em></label>
        <input type="text" name="adress" id="adress" required>
    </div>
    <input id="submit" type="submit" value="Submit">
</form>

第一件事不要为 2 个组件放置相同的 id，即使它在不同的div 中......第二个要获得您的结果，当您隐藏div 时，禁用与之对应的输入字段并在需要时重新启用它

第一反应是文档中的ID必须是唯一的！ - 表单元素名称可以相同，但这意味着它们是组的一部分（即：在选项按钮集合中，只有一个可能的选择）。

最好使它们都保持唯一，否则您需要专门引用formName和elementName。

每当隐藏div 时，将其中的所有输入设置为禁用。禁用输入时，将忽略必需属性，并且禁用的输入不会随表单一起提交，因此后端不会发生名称冲突。

var inputs = divs[no].getElementsByTagName('input');
for (var x = 0, len = inputs.length; x < len; x++) {
    inputs[x].disabled = true;
}

显然，当您取消隐藏div 时，您还需要遍历并重新启用该div 中的所有输入。

更新：下面是根据要求使用给定代码的示例。首先，JS：

function visibilite1(_this) {
  var inputs;
  var divToShow;
  var id = _this.value;
  var divs = document.getElementsByTagName('div');
  for(var no=0;no<divs.length;no++) {
    if (divs[no].className=='divs') { 
      divs[no].style.display = "none";
      inputs = divs[no].getElementByTagName('input');
      for (var x = 0, len = inputs.lenght; x < len; x++) {
        inputs[x].disabled = true;
      }
    }
  }
  divToShow = document.getElementById(id);
  divToShow.style.display = "block"; 
  inputs = divToShow.getElementByTagName('input');
  for (var x = 0, len = inputs.lenght; x < len; x++) {
    inputs[x].disabled = false;
  }
}

还有 HTML（减少了一点，但足以看到它应该是什么样子）：

<select name="role" id="role" onchange="visibilite1(this);hide()" >
  <option value='test1'>Year1</option>
  <option value='test2'>Year2</option>
</select>
<div id="test1" class="divs">
  <label>Name </label>
  <input type="text" name= "name" required>  </br>
  <label>User name </label>
  <input type="text" name= "username" required></br>
  <label >Password <em>*</em></label>
  <input type="password"   name= "password" required></br>
</div>
<div id="test2" class="divs">
  <label>Name </label>
  <input type="text" name= "name" required>  
  <label>User name </label>
  <input type="text" name= "username" required>
  <label>Password <em>*</em></label>
  <input type="password"   name= "password" required>
  <input type="text" name= "username" required>
  <label>Adress<em>*</em></label>
  <input type="text"   name= "adress" required>
</div>