无法将 .append() 选项添加到 select

Question

我对 .append() 函数有疑问。我在 jquery 中创建了一个 <select/> 元素，并将其附加到许多 table 行，其中包含 (sample 类):

var $select = $('<select class="my-select" ><option></option></select>');
$('‪#‎mytable‬ tr.first_row td.first_cell').append($select.clone());
$('‪#‎mytable‬ tr.second_row td.first_cell').append($select.clone());

然后，我想在 select 上添加一个新的 <option/>，所以我这样做：

var new_option = $('<option/>').val('value').text('text');
$('.my-select').append(new_option); //works
$select.append(new_option); //doesn't work

一切正常，select 被添加到任何 table 行，new_option 被附加到任何 <select>，但我不能将它附加到 $select 元素...。我尝试了很多方法，但似乎不可能... 我也试过：

$select.find('option:last').after(new_option); //doesn't work
$select.find('option:last').before(new_option); //doesn't work
new_option.appendTo($select); //doesn't work

这里是fiddlehttp://jsfiddle.net/v15zyzxj/4/

有人知道为什么这不起作用吗？看起来非常简单，但我无法解决这个问题，我希望有人能帮助我了解发生了什么..

Answer 1

似乎追加在 stacksnippets

var $select = $('<select class="my-select" ><option></option></select>');
// define variable `clone`
var clone = $select.clone();
var new_option = $('<option/>').val('value').text('text');
$select.append(new_option); 

$("body").append($select);

var new_option2 = $('<option/>').val('value').text('text2');
clone.append(new_option2);
$("table tr").append(clone);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
  <tr></tr>
    </tbody>
</table>

Answer 2

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

只需更改：

$select.append(option);

收件人：

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

DEMO

无法将 .append() 选项添加到 select

Can't .append() option to select

jquery

append

appendto