Question

我有一个由sql查询填充的选择输入。我正在尝试执行以下操作，因为网页发生了一系列事件

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

填充teamList后，单击一个按钮并通过empty（）删除它。我认为数据将保留在变量teamList中，因为我在删除DOM元素时没有改变变量。也许我只是存储它或称错了？我试着这样称呼它：

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

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

感谢任何帮助。

我自己的回答：

teamList.prop（＆＃34; outerHTML＆＃34;）实际上

感谢Patrick Evans

Answer 1

这是因为teamList是一个dom对象。默认情况下，当对象进行字符串连接时，它将打印出[Object object]而不是对象的内容，在这种情况下是组成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')更改为$('body')，因为您不应将内容直接附加到<html>元素。

如果你只想使用字符串连接，你需要使用jQuery的outerHTML函数，该函数将返回元素的html及其内容

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

jQuery存储或传递元素的选择（下拉）

1 个答案: