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

Question

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

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

＆＃13;

＆＃13;

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

      return $test;
    }
  });

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是，正如你所看到的，我无法插入一个真实的＆＃34; <option>创建的<select> 文字属性。我获得的回报是[object Object]。

我甚至尝试过返回.get(0)，但它也没有工作。

我还没有非常使用JavaScript，所以我只是想知道这是否可行。如果是，我该怎么做才能达到预期的行为？

Answer 1

您已走上正轨，但如果要插入嵌套的html，则需要使用html而不是text。请参阅以下代码段：

$(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>

修改 - 后续问题（多个选项）

您可以使用最少的代码更改映射所需的选项 - 请参阅以下代码段：

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>