从按钮点击表格和下拉列表中获取值

Question

我有一个代码，可以在按钮点击时动态地从表中的两列（成员，描述）中读取值。

Table html

从表中读取值的JQuery：

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

    var myCollection = [];

    $('div#body').find('tr:gt(0)').each(function() {
      var row = this;
      var myObj = {


        label: valuefromType($(row).find($(row).find('td:eq(1)').children())),
        opis: valuefromType($(row).find($(row).find('td:eq(2)').children()))


      };
      myCollection[myCollection.length] = myObj;

    });

    console.log(myCollection)

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

  });

});

按钮点击存储在数组中的结果为：

0: Object { label: "1", opis: null }
1: Object { label: "2", opis: "test2" }
​2: Object { label: "3", opis: "test3" }
3: Object { label: "5", opis: "3" }
4: Object { label: "9", opis: "test5" }
5: Object { label: "15", opis: "test88" }

现在我需要从位于table上方的下拉列表（House Center）中获取所选值（1,2,3,4,5 ...）并将其存储在按钮上的数组中点击。

有人可以帮助我吗？

Answer 1

喜欢那样： Fiddle link

JS：

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

Answer 2

您需要从click事件中声明数组，然后将新绑定的事件添加到您的选择中，如下所示：

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

如果您想以与之前的值相同的方式执行它，请执行以下操作：

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

修改

您可以将此myCollection[myCollection.length] = myObj;更改为此myCollection.push(myObj)。消耗更少的内存。

尽量减少$()的使用。

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

  function valuefromType(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