Werte im Auswahlfeld ausgewählt können nicht abgerufen werden - jQuery

Question

Ich bin eine Anwendung, in der ich habe Tabelle mit Formularelementen wie Auswahl, Eingabe usw. Ich möchte die in Formularelemente ausgewählten Werte in eine andere Tabelle auffüllen.

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

Meine Schritte:

1. Get Tabelle1 und Tabelle2
2. Zählen Sie die Anzahl der Zeilen in der Tabelle 1

3. Sie können meinen Code here

   JS finden Fügen Sie so viele leere Zeilen in die Tabelle ein2

4. jede Zeile Get in table1
5. die td Count in jeder Reihe von table1
6. die Kinder in jedem td Finden
7. Überprüfen Sie, ob Kinder wählen ist, eingegeben wird, oder einfach nur Text
8. Wenn Kinder wählen ist, festzustellen, ob es entsprechend Multi-Select oder einzelne
9. Gesetz ist für jedes Formularelement nur Werte zu kopieren und dann hängen sie an table2
10. beenden

All dies auf Knopfdruck COPY

Problem: Irgendwie gelang es, die überprüften Eingabeformularelementwerte zu bekommen. Aber es ist nicht möglich, die Werte im Auswahlfeld auszuwählen.

Für Multi Auswahlbox mein Code:

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

Für Einzelauswahlfeld:

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

Was ist mein Fehler genau? Danke im Voraus

Answer 1

Für ausgewählte .val() funktioniert nicht.Sie ​​müssen find() wie in der Realität verwenden, wenn Sie ein Auswahlfeld auswählen, wird der Wert nicht geändert.

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

Für <select> können Sie nicht val() verwenden.

Mit der .val() Funktion auf einem Multi-Select-Liste wird ein Array der ausgewählten Werte zurück:

Dieser Code:

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

    } 

Änderung dieser:

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

    }