jQuery存储或传输选择(下拉)的元素

jQuery store or transfer elements of a select (drop down)

本文关键字：下拉 元素 选择 存储 传输 jQuery      更新时间：2023-09-26

我有一个由sql查询填充的选择输入。由于网页

发生的事件顺序，我正在尝试执行以下操作

1)填充选择列表2)清空包含选择列表的div3)在添加到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);

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

任何帮助都是感激的。

我自己的回答:

teamList.prop (outerHTML)

感谢Patrick Evans

这是因为teamList是一个dom对象。默认情况下，当对一个对象进行字符串连接时，它将打印出[Object object]，而不是对象的内容，在本例中是组成dom元素的html文本。

使用jQuery的append函数重新添加select到表单。

$('.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);
});
相关文章：