Select element options not appending on dynamically added row

Question

why does appending values of select values in foo function dos not trigger when I click add row button?

  $(document).on("click", '.tdAdd', function () {
      //alert($(this).closest('tr').index());
      var newRow = $("<tr>");
      var cols = "";
      cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>';
      cols += '<td><input type="button" value="Delete" class="tdAdd"/></td>';
      cols += '<td><input type="text" /></td>';
      cols += '<td><select class = "t">' + foo($(this).closest('tr').index() + 1) + '</select></td>';
      newRow.append(cols);
      newRow.insertAfter($(this).closest("tr"));
  });

see this FIDDLE for demo.

  function foo() {
      var select = $('.t')
          .append($("<option></option>")
          .attr("value", 'one')
          .text('One'));
      select = $('.t')
          .append($("<option></option>")
          .attr("value", 'two')
          .text('Two'));

  }

charlietfl · Answer 1 · 2015-01-26T04:27:51.777

Several problems, first of which is foo() doesn't return anything so you are trying to concatenate undefined into your string.

Next what you are doing inside foo() doesn't make sense since $('.t') is a collection of every element in the page with that class.

The following will clone the first select, set it's value to null and then return the html to be added into your string

  function foo(index) {
      var $select = $('.t:first').clone().val('');
      return $select.html(); // return the innerHtml of the select as string
  }

DEMO

To really simplify your whole addRow, you could clone a whole row , reset the values of the form controls and append that clone... all without needing any new strings

$(document).on("click", '.tdAdd', function () {
    var $currentRow = $(this).closest('tr');
    var $newRow = $currentRow.clone();
    $newRow.find(':input').val('');
    $currentRow.after($newRow);
})

score 1 · Answer 2 · answered Jan 26 '15 at 04:09

The problem is, you are trying to add the options to the next row of current 'tr' which would always been the next row available in DOM (the one which was originally next to the current row - Orange row). To add options in row you are preparing in code you have to first add it to DOM and then insert the options tag.

Minimal changes to your code :

 $(document).on("click", '.tdAdd', function () {
      //alert($(this).closest('tr').index());
      var newRow = $("<tr>");
      var cols = "";
      cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>';
      cols += '<td><input type="button" value="Delete" class="tdAdd"/></td>';
      cols += '<td><input type="text" /></td>';
      cols += '<td><select class = "t"></select></td>';
      newRow.append(cols);
      newRow.insertAfter($(this).closest("tr"));
      foo($(this).closest('tr').index() + 1);//add options once the newly created 'select' is available in DOM
  });

my bad I forgot about the foo() but that foo() is still messy — charlietfl, Jan 26 '15 at 04:17
I already mentiond in my answer that these are minimal changes. Though i know this can be handled in multiple ways :) — Vijay, Jan 26 '15 at 04:25

score 1 · Answer 3 · edited May 23 '17 at 10:26

1

You were appending the JQuery object. I have extracted the HTML and appended that. (see this answer):

function foo(index) {
    var select = $("<option></option>")
                 .attr("value", 'one')
                 .text('One')
                 .prop('outerHTML');
    return select;
}

I have updated the updated fiddle

http://jsfiddle.net/8r0rdcLf/7/

edited May 23 '17 at 10:26

Community

1
1

answered Jan 26 '15 at 04:17

surajck

1,186
9
23

Select element options not appending on dynamically added row

3 Answers3