向JavaScript中的选择添加选项而不更新

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


        } 
    }

我正在跨多个输入字段并收集值，然后将这些值添加到新的option元素中。 当我将appendChild selectaccount2到作为选择元素的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构造函数和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"> 

---

旁注：您正在成为“内隐全球性恐怖 ：宣告index牺牲品。