Question

我正在构建一个应用程序，其中我有表格元素的表格，如select，input等。我想将表单元素中选择的值填充到另一个表格。

您可以找到我的代码here

JS：

 $('button').click(function() {
  var rows = $('#table1 tbody tr');
  var previewTable = $('#table2 tbody');
  previewTable.find('tr').remove();
  for (var i = 0; i < rows.length; i++) {
   var tr = $('<tr> </tr>');
   previewTable.append(tr);
   var row_cloned = $(rows[i]).clone();
   var cols = rows[i].getElementsByTagName("td");
   for (var j = 0; j < cols.length; j++) {
    var col_cloned = row_cloned.find('td').clone();
    previewTable.find('tr').eq(i).append(col_cloned[j]);


    if ($(col_cloned[j]).children().length > 0) {
     $(col_cloned[j]).children().each(function(index, item) {
      if ($(item).is('select')) {
        if ($(item).attr('multiple')) {
          var foo = [];
          $(item).each(function(i, selected) {
            console.log($(selected).val());
            foo[i] = $(selected).val();
          });
          $(col_cloned[j]).text(foo);
        } else {
          $(col_cloned[j]).text($(item).val());
        }

      } else if ($(item).is('label')) {
        var selected = [];
        $(item).find('input:checked').each(function(index, item) {
          selected.push($(item).val());
          $(col_cloned[j]).append(selected + '<br>');
        })
      }
    })
  } else {
    $(col_cloned[j]).text($(col_cloned[j]).text());
    }
   }
  }
})

我的步骤：

获取table1和table2
计算table1
在table2中添加这么多空行
获取table1中的每一行
计算table1每行中的td
在每个td中找到孩子
检查儿童是选择，输入还是纯文本
如果选择了儿童，请确定它是多选还是单
相应地对每个表单元素进行操作，以仅复制值，然后附加到table2
光洁度

单击按钮上的所有这些COPY

问题：以某种方式设法获取已检查的输入表单元素值。但未能在选择框中选择值。

对于多选框我的代码：

if ($(item).attr('multiple')) {
      var foo = [];
      $(item).each(function(i, selected) {
        console.log($(selected).val());
        foo[i] = $(selected).val();
      });
      $(col_cloned[j]).text(foo);
    }

对于单选框：

else {
      $(col_cloned[j]).text($(item).val());
    }

我的错误到底是什么？在此先感谢

Answer 1

对于选定的.val()不起作用。当您选择一个选择框时，您必须使用find()，但其值不会改变。

 if ($(item).attr('multiple')) {
     var foo = [];
     $(item).each(function(i, selected) {
     foo[i] = $(selected).find(":selected").text();  // see this
     });
     $(col_cloned[j]).text(foo);
  } else {
     $(col_cloned[j]).text($(item).find(":selected").text());  // see this
  }

Answer 2

对于<select>，您无法使用val()。

在多选列表上使用.val()函数将返回所选值的数组：

此代码：

if ($(item).is('select')) {
    if ($(item).attr('multiple')) {
      var foo = [];
      $(item).each(function(i, selected) {
        console.log($(selected).val());
        foo[i] = $(selected).val();
      });
      $(col_cloned[j]).text(foo);
    } else {
      $(col_cloned[j]).text($(item).val());
    }

  }

更改为：

if ($(item).is('select')) {
    if ($(item).attr('multiple')) {
      var foo = $('#multipleSelect').val();
      $(col_cloned[j]).text(foo);
    } else {
      var optionSelected = $(item).find("option:selected");
      $(col_cloned[j]).text(optionSelected.val());
    }

  }

无法检索在选择框中选择的值-jQuery

2 个答案: