adding option to a select in JavaScript not updating

Question

the select option will not update till i add the innerHTML again.

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


        } 
    }

i am stepping thorugh multiple input fields and gathering the values, these are then added to a new option element. when i appendChild to the selectaccount2 which is the select element, this does not insert the value. any ideas?

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

@user2181397: Better yet, a runnable minimal reproducible example using Stack Snippets (the <> toolbar button) right here on-site. — T.J. Crowder
– T.J. Crowder, Commented Jul 13, 2016 at 13:03

T.J. Crowder · Accepted Answer · 2016-07-13 13:13:37Z

Although I've seen people recommend adding an option the way you have there, so presumably it works on many if not most browsers, the most robust, reliable way I've ever found is the Option constructor and the add method:

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

If you just provide the value (the first argument), the text and value will be the same. If you give two arguments, the first is the text and the second is the value.

Live copy:

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

Side note: You're falling prey to The Horror of Implicit Globals: Declare index.

Collectives™ on Stack Overflow

adding option to a select in JavaScript not updating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related