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

Question

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

你可以找到我的代码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());
    }
   }
  }
})

我的步骤：

1. 获取table1和table2
2. 统计table1的行数
3. 在 table2 中添加这么多空行
4. 获取table1中的每一行
5. 统计table1每一行的td
6. 在每个 td 中找到孩子
7. 检查孩子是选择、输入还是纯文本
8. 如果children是select，判断是多选还是单选
9. 对每个表单元素采取相应措施，仅复制值，然后附加到 table2
10. 完成

这一切都在一个按钮上点击复制

问题：不知何故设法获取检查的输入表单元素值。但未能在选择框中选择值。

对于多选框我的代码：

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

  }