如何使用函数回调来设置新创建的元素属性？

Question

在this 问题的推动下，我一直在尝试做一些我以前从未尝试过的事情。

使用创建新 HTML 元素的最新方法，我做了以下工作：

$(function() {
  var $element = $('<select>', {
    class: 'form-control',
    name: 'dropdownmenu',
    text: function() {
      var $test = $('<option>', {
        value: '1',
        text: '1'
      });

      return $test;
    }
  });

  $('p').after($element);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>

但是，如您所见，我无法在创建的 <select> text 属性中插入“真实”<option>。我得到的回报是[object Object]。

我什至尝试返回.get(0)，但也没有用。

我还没有非常熟悉 JavaScript，所以我只是想知道这是否可能。如果是，我可以做些什么来实现所需的行为？

Answer 1

你在正确的轨道上，但如果你想插入嵌套的 html，你需要使用 html 而不是 text。看下面的sn-p：

$(function() {
  var $element = $('<select>', {
    class: 'form-control',
    name: 'dropdownmenu',
    html: function() {
      var $teste = $('<option>', {
        value: '1',
        text: '1'
      });

      return $teste;
    }
  });

  $('p').after($element);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>

编辑 - 后续问题（多选）

您只需对代码进行最少的更改即可映射所需的选项 - 请参阅下面的 sn-p：

var options = [1, 2, 3, 4, 5];

$(function() {
  var $element = $('<select>', {
    class: 'form-control',
    name: 'dropdownmenu',
    html: options.map(function(option) {
      return $('<option>', {
        value: option,
        text: option
      })
    })
  });

  $('p').after($element);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>