Get Values From The Table And Drop Down List On Button Click

I have a code that reads values from two columns (Members, Description) in the table dynamically on button click. Table html JQuery that reads the values from the table: $(function

Solution 1:

You need to declare array out of click event, and then add new event binded to your select like this:

$('#MainContent_ddlBusinessCenter').on('change', function () {
    myCollection.push($(this).val());
});

If you want to stroe it the same way as are the previous values do it like this:

$('#MainContent_ddlBusinessCenter').on('change', function () {
    var dropdown = $(this);
    myCollection.push({label: dropdown.val(), opis: dropdown.find("option:selected").text()});
});

EDIT

You can change this myCollection[myCollection.length] = myObj; to this myCollection.push(myObj). It is less memory consuming.

And try to minimize the use of $().

$(function() {
  $('#myButton').on('click', function() {

    var myCollection = [];

    $('div#body').find('tr:gt(0)').each(function(i, e) {
      var row = $(e);
      myCollection.push({
        label: valuefromType(row.find(row.find('td:eq(1)').children())),
        opis: valuefromType(row.find(row.find('td:eq(2)').children())),
        ddl: $('#MainContent_ddlBusinessCenter').val()
      });
    });

    console.log(myCollection);
  });

  functionvaluefromType(control) {
    var type = $(control).prop('nodeName').toLowerCase();
    switch (type) {
      case"input":
        return $(control).val();
      case"span":
        return $(control).text();
      case"select":
        return $(control).val();
    }
  }
});

JSFiddle

Solution 2:

Like that : Fiddle link

JS:

$('#MainContent_ddlBusinessCenter').on('change', function () {
var value = $('#MainContent_ddlBusinessCenter').val();
alert(value);
});