不能.append（）选项来选择元素 [英] Can't .append() option to select element

问题描述

我有.append（）函数的一个问题。

I have a problem with .append() function.

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

下面是一个短的指令列表的小提琴：
http://jsfiddle.net/v15zyzxj/5/

Here is the fiddle with a short instruction list: http://jsfiddle.net/v15zyzxj/5/

我希望，如果我追加一个选项，这就是如果我追加一个新行中。

I would expect that if I append an option, this is shown if I append a new row.

PS我删除了previous问题，因为它是越来越pretty凌乱。

PS I deleted my previous question because it was getting pretty messy.

推荐答案

新的选项元素刚创建并添加到 $选择被删除并添加到了DOM 。我选元素。为了避免这种情况，克隆添加到 $选择如下建议。

The new option element just created and added to $select is being removed and added to .my-select elements on the DOM. To avoid that, add a clone to $select as suggested below.

只要改变：

$select.append(option);

要：

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

DEMO

另外，您可以使用。新增（）来要追加新的选项来，然后就 .append（）无需 .clone（）：

Alternatively you could use .add() to combine all elements (in DOM or memory) that you want to append the new option to and then just .append() without the need to .clone():

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

DEMO

这篇关于不能.append（）选项来选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！