试图将在动态字段输入中与本机JavaScript中的几年集成在一起

Question

我已经在此网站上进行了很多搜索，并提出了我想一起使用的两种方法。根据其他编程经验，我似乎需要嵌套正在使用的功能。

我要一起使用的两个功能是

1. 创建基于儿童总数的动态输入和
2. 一旦根据创建儿童数量创建动态字段的自动更新年份的选择列表。

根据我有限的JavaScript经验，我对此有些挣扎，并且可以使用一点帮助。

这是我到目前为止所拥有的代码，并且为每个孩子字段生成的年度"选择列表"存在问题。

function addinputFields() {
  var number = document.getElementById("child").value;
  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  for (i = 0; i < number; i++) {
    container.appendChild(document.createTextNode("Child " + (i + 1)));
    var input = document.createElement("input");
    var min = new Date().getFullYear() - 40;
    cur = new Date().getFullYear();
    select = document.getElementById('year');
    for (var a = min; a <= cur; a++) {
      var opt = document.createElement('option');
      opt.value = a;
      opt.text = a;
      select.appendChild(opt);
    }
    input.type = "text";
    input.name = "Child" + i;
    container.appendChild(input);
  }
}

<div>
  <label for="child">Number of Children:</label>
  <input id="child" type="text" name="child" value="" size="3" style="margin-left:15px;text-align:center;">
</div>
<div>
  <button class="kb" onclick="addinputFields()">Add</button>
</div>
<p>Input Kindergarten Start Years</p>
<div id="container">
</div>
<select id="year">

Answer 1

我从您的问题中可以理解的是，您在选定的年份列表中面临问题。因此，我对您的代码进行了一些更改，如果您正在寻找的话，它将有所帮助。

function addinputFields() {
  var number = document.getElementById("child").value;
  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  for (i = 0; i < number; i++) {
    container.appendChild(document.createTextNode("Child " + (i + 1)));
    var input = document.createElement("input");
    var selectList = document.createElement("select");
    selectList.id = "year"+(i+1);
    var min = new Date().getFullYear() - 40;
    cur = new Date().getFullYear();
    select = document.getElementById('year');
    for (var a = min; a <= cur; a++) {
      var opt = document.createElement('option');
      opt.value = a;
      opt.text = a;
      selectList.appendChild(opt);
    }
    input.type = "text";
    input.name = "Child" + i;
    container.appendChild(input);
    container.appendChild(selectList);
  }
}

Answer 2

我能够调整您的代码调整，现在它正是我想要的...

再次感谢您的所有帮助!!!

function addinputFields() {
  var number = document.getElementById("child").value;
  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  for (i = 0; i < number; i++) {
    container.appendChild(document.createTextNode("Child " + (i + 1)));
    var input = document.createElement("input");
    var selectList = document.createElement("select");
    selectList.id = "year"+(i+1);
    var min = new Date().getFullYear() - 40;
    cur = new Date().getFullYear();
    select = document.getElementById('year');
    for (var a = min; a <= cur; a++) {
      var opt = document.createElement('option');
      opt.value = a;
      opt.text = a;
      selectList.appendChild(opt);
    }
    container.appendChild(selectList);
  }
}

<div>
        <label for="child">Number of Children:</label>
        <input id="child" type="text" name="child" value="" size="3" style="margin-left:15px;text-align:center;">
    </div>
    <div>
        <button class="kb" onclick="addinputFields()">Add</button> 
    </div> 
    <p>Input Kindergarten Start Years</p>
    <div id="container">
    </div>