Question

我的.append（）函数有问题。我在jquery中创建了一个<select/>元素，并且我将它附加到许多表行，带有（样本类）：

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

然后，我想为该选择添加一个新的<option/>，所以我喜欢这样：

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

一切正常，select会被添加到任何表格行，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

这是小提琴http://jsfiddle.net/v15zyzxj/4/

任何人都知道为什么这不起作用？它看起来非常简单，但我无法解决这个问题，我希望有人可以帮助我了解正在发生的事情..

Answer 1

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

只需改变：

$select.append(option);

要：

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

DEMO

Answer 2

似乎附加在stacksnippets

＆＃13;

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

＆＃13;

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

＆＃13;

无法选择

2 个答案: