Javascript jQuery存储或传输select的元素（下拉列表）

我有一个由sql查询填充的select输入。由于网页发生的事件的顺序，我正在尝试执行以下操作

1） 填充选择列表 2） 清空包含选择列表的div 3） 在附加到html的新div中重新使用选择列表

我从不离开页面，但我确实销毁了select元素。我希望能够存储select元素以供以后使用。我想这很容易：

var teamList; 

$('.otherSelector').on('change',function(){
  $.post(url, {x:x},function(data){ 
    teamList = $('#teamList'); //actual select input

            $.each(data, function(key, val){
                var option = $('<option/>');
                option.attr('value', key)
                      .html(val)
                      .appendTo(teamList);
            });
  }

var团队列表；
$（'.otherSelector'）。在（'change'，function（）上{
$.post（url，{x:x}，函数（数据）{
团队列表=$（“#团队列表”）；//实际选择输入
$。每个（数据、函数（键、值）{
var选项=$（''）；
option.attr（'value'，key）
.html（val）
.附录（团队列表）；
});
}

填充团队列表后，单击一个按钮并通过empty（）将其删除。但是，我认为数据将保留在变量temlist中，因为在删除DOM元素时，我没有更改变量。可能我只是存储了它或调用了错误的变量？我尝试这样调用它：

$('.selector').on('click',function(){
  var newStuff = '<form>'+
                 '<input name = "test" type = "text">'+
                 teamList+
                 '........etc
$('html').append(newStuff);

$（'.selector'）。在（'click'，function（）上{
var newStuff=“”+
''+
团队名单+
“……等等
$（'html'）.append（newStuff）；

在表单元素中，我看到的是[object object]，而不是下拉列表

感谢您的帮助

---

我自己的回答是：

实际上是teamList.prop（“outerHTML”）

---

多亏了Patrick Evans，这是因为

teamList

是一个dom对象。默认情况下，在对对象进行字符串连接时，它将打印出

[对象对象]

，而不是对象的内容，在本例中，是组成dom元素的html文本

要将select重新添加到表单中，请使用jQuery的

append

函数

$('.selector').on('click',function(){
   var form = $('<form><input name = "test" type = "text"></form');
   form.append(teamList);
   $('body').append(form);
});

---

您会说您的两个发布方法之间的区别只是偏好？附加到html有什么不好？谢谢！.prop（“outerHTML”）实际上，因为直接向

元素添加内容是无效的html标记。它只起作用，因为浏览器可以原谅html标记错误。您是正确的，它是

prop（'outerHTML'）

，或者获取实际的dom元素并访问

outerHTML

：

teamList[0]。outerHTML

$('.selector').on('click',function(){
   var newStuff = '<form>'+
                 '<input name = "test" type = "text">'+
                 teamList[0].outerHTML+
                 '</form>';
   $('body').append(newStuff);
});