无法将 .append() 选项附加到 select 元素

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/

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

PS 我删除了我之前的问题，因为它变得很乱。

Answer 1

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

只需更改：

$select.append(option);

收件人：

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

DEMO

或者，您可以使用 .add() 组合所有要附加新 option 的元素（在 DOM 或内存中），然后只 .append() 而不需要 .clone():

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

DEMO

无法将 .append() 选项附加到 select 元素

Can't .append() option to select element

jquery

append

appendto