如何将我的 select2 附加到 div 框？

Question

我想将我的 select2 附加到 div box。但后来它不再起作用了。

这里是fiddle：https://jsfiddle.net/r7cop362/165/

<select class="select2" >
    <option selected="selected">Kerry</option>
    <option selected="selected">Cork</option>
</select>
<div id="box"></div>


$('.select2').select2();
$(document).ready(function () {
  $("#box").append("<select class='select2'><option selected='selected'>Cat</option><option selected='selected'>Dog</option></select>");
});

Answer 1

在追加后再次调用select2():

$(document).ready(function () {
  $("#box").append("<select class='select2' ><option   selected='selected'>Cat</option><option selected='selected'>Dog</option> </select>");
  $('.select2').select2();
});

UPDATED FIDDLE

Answer 2

在附加 select 标签后初始化 select2 插件。

$(document).ready(function () {
  $("#box").append("<select class='select2' ><option   selected='selected'>Cat</option><option selected='selected'>Dog</option> </select>");
  $('.select2').select2();
});

Answer 3

$("#box").append($('.select2'));

或

$('.select2').appendTo("#box");