Question

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

        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这是select元素时，这不会插入值。任何想法？

＆＃13;

<!-- 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>

＆＃13;

Answer 1

虽然我已经看到人们建议你按照那里的方式添加一个选项，但可能它适用于许多（如果不是大多数）浏览器，我发现的最强大，最可靠的方式是{{3 }和add方法：

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

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

实时复制：

＆＃13;

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();

＆＃13;

<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">

＆＃13;

附注：您已成为Option constructor的牺牲品：声明index。

在JavaScript中为select更新选项添加选项

1 个答案:

在JavaScript中为select更新选项添加​​选项

1 个答案:

在JavaScript中为select更新选项添加选项