javascript - 在 JavaScript 中向选择添加选项不更新

Question

在我再次添加 innerHTML 之前，选择选项不会更新。

        function myFunction() {
    for (index = 0; index < array.length; ++index) {

        var bAccount = array[index].id;
        var selectban = document.getElementById(bAccount);
        var selectaccount2 = document.getElementById("AccountToUse1");
        var opt = document.createElement('option');
        opt.value = selectban.value;
        opt.innerHTML = selectban.value;
        selectban.value = "test";
        selectaccount2.appendChild(opt);


        } 
    }

我正在逐步浏览多个输入字段并收集值，然后将这些值添加到新的选项元素中。当我 appendChild 到 selectaccount2 (即选择元素)时，不会插入该值。有什么想法吗？

<!-- Text input-->
<div id="details" style="display: none;">


  <!-- Text input-->
  <div class="form-group">
    <label class="col-md-4 control-label" for="accountNumber">Account Number</label>
    <div class="col-md-4">
      <input id="accountNumber" name="accountNumber" type="text" placeholder="your game account number" class="form-control input-md" required="" onchange="myFunction()">

    </div>
  </div>
</div>

<div id="DetailsFooter" style="display: none;">
  <!-- Text input-->
  <div class="form-group">
    <label class="col-md-4 control-label">details</label>
    <div class="col-md-4">
      <select id="AccountToUse" name="AccountToUse" type="text" placeholder="" required="">
      </select>

    </div>
  </div>
</div>

<fieldset id="DetailsView" class="DetailsView">
  <h2>Details Applicant 1</h2>
  <!-- Select Basic -->
  <div class="form-group">
    <label class="col-md-4 control-label" for="Accounts">How many accounts do you have?</label>
    <div class="col-md-4">
      <select id="Accounts" name="Accounts" class="form-control" onchange="amountchanged()">
        <option value="0">Please Select an Amount</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </div>
  </div>
  <div id="DetailsContainer">
  </div>
</fieldset>


<script>
  var select = document.getElementById("Accounts"),
    container = document.getElementById("DetailsContainer");
  var array = [];
  var accountToUse;
  var footer;
  var num = 0;

  function changeId(nodes, n) {
    for (var i = 0; i < nodes.length; i = i + 1) {
      if (nodes[i].childNodes) {
        changeId(nodes[i].childNodes, n);
      }
      //if id value is 'accountNumber', change it
      if (nodes[i].id && /^ch$|^accountNumber$/i.test(nodes[i].id)) {
        nodes[i].id += String(n);
        array.push(nodes[i]);
      }

    }
  }

  function amountchanged() {
    var amount = select.value,
      obj = document.getElementById("details").cloneNode(true),

      children = obj.childNodes;
    footer = document.getElementById("DetailsFooter");
    container.innerHTML = "";
    var count;

    num += 1;
    obj.id = obj.id + num;

    if (num < 16) {
      changeId(children, num);
    }
    document.body.appendChild(obj);
    for (count = 1; count <= amount; count++) {


      var heading = "<h3>" + count + " Details</h3>"

      container.innerHTML += heading;
      container.innerHTML += obj.innerHTML;

    }
    accountToUse = footer.getElementsByTagName("select")[0];
    accountToUse.id = 'AccountToUse1';
    container.innerHTML += footer.innerHTML;

  }

  function myFunction() {
    for (index = 0; index < array.length; ++index) {

      var bAccount = array[index].id;
      var select22 = document.getElementById(bAccount);
      var selectaccount2 = document.getElementById("AccountToUse1");
      var opt = document.createElement('option');
      opt.value = select22.value;
      opt.innerHTML = select22.value;
      select.value = "test";
      selectaccount2.appendChild(opt);


    }


  }

</script>

Answer 1

尽管我见过人们建议按照您的方式添加选项，所以想必它适用于许多(如果不是大多数)浏览器，但我发现的最强大、最可靠的方法是 Option constructor和 add 方法:

selectaccount2.options.add(new Option(selectban.value));

如果您只提供值(第一个参数)，则文本和值将相同。如果给出两个参数，第一个是文本，第二个是值。

实时复制:

var array = [{
  id: "one"
}, {
  id: "two"
}, {
  id: "three"
}];

function myFunction() {
  for (var index = 0; index < array.length; ++index) {

    var bAccount = array[index].id;
    var selectban = document.getElementById(bAccount);
    var selectaccount2 = document.getElementById("AccountToUse1");
    var opt = document.createElement('option');
    opt.value = selectban.value;
    opt.innerHTML = selectban.value;
    selectban.value = "test";
    selectaccount2.appendChild(opt);
  }
}
myFunction();

<select id="AccountToUse1" size="4"></select>
<input type="hidden" id="one" value="uno">
<input type="hidden" id="two" value="due">
<input type="hidden" id="three" value="tre">

<小时/>

旁注:您正在成为 The Horror of Implicit Globals 的牺牲品:声明索引。