jquery - 无法使用 .append() 选项来选择元素

Question

我的 .append() 函数有问题。

$('#add_row').on('click', function(){
    var new_row = $(row_default).clone();
    new_row.find('.col-1').text($(this).find('.ass-col-partenza').text());
    new_row.find('.col-2').text($(this).find('.ass-col-colore').text());
    new_row.find('.col-3').empty().html($select.clone());
    $table.append(new_row);
    console.log('New row added with select: ', $select);
});

$('#add_option').on('click', function(){
    var option = $('<option/>').val('Value '+idx).text('Text '+idx);
    idx++;
    // This should add options, and they should be added to DOM in future .append()
    $select.append(option);
    $('#my_table').find('.my_select').append(option);
    console.log('Added new option, new select is: ',$select);
});

这是带有简短指令列表的 fiddle : http://jsfiddle.net/v15zyzxj/5/

我希望如果我 append 一个选项，如果我 append 一个新行，就会显示该选项。

PS 我删除了之前的问题，因为它变得非常困惑。

Answer 1

刚刚创建并添加到 $select 的新 option 元素将被删除并添加到 DOM 上的 .my-select 元素。为了避免这种情况，请按照下面的建议将克隆添加到 $select。

只需更改:

$select.append(option);

致:

$select.append(option.clone());

DEMO

或者，您可以使用 .add() 组合要 append 新 option 的所有元素(在 DOM 或内存中)，然后仅使用 .append()，无需.clone():

//$select.append(option);
$('#my_table').find('.my_select').add($select).append(option);

DEMO