Question

我想填充动态创建的select并初始化select2库（https://select2.github.io）。我有这个HTML代码结构：

<div class="form_write">
   <i>Тип кузова</i>
   <select name="" id="" class="marka razdel">
      <option value="">bmw</option>
      <option value="">mers</option>
      <option value="">opel</option>
      <option value="">honda</option>
      <option value="">jiguli</option>
   </select>
</div>

我以编程方式创建它：（不要查看ajax请求，不使用它的响应）

$('.razdel').on('change', function () {
    var thisElem = $(this);
    $.post('/ajax/getSubRazdels', {razdel_id: $(this).val()}, function (data) {
        var razdels = JSON.parse(data);
        var wrapper = $('<div class="form_write"></div>').append('<li></li>');
        var select = $('<select name="" class="marka"></select>');
        wrapper.append(select);
        $(select).select2();
        thisElem.closest('.form_write').after(select);
    });
});

选择创建，但它隐藏了，无法理解我错过了什么？

Answer 1

问题是因为我在选择元素上初始化select2而没有选项后添加它们有效！这是解决方案：

$('.razdel').on('change', function () {
    var thisElem = $(this);
    $.post('/ajax/getSubRazdels', {razdel_id: $(this).val()}, function (data) {
        var razdels = JSON.parse(data);
        var wrapper = $('<div class="form_write"></div>').append('<i></i>');
        var select = $('<select name="" class="marka"></select>');
        $.each(razdels, function (k, v) {
            var option = $('<option></option>').attr('value', v['id']).text(v['title']);
            select.append(option);
        });
        wrapper.append(select);
        $(select).select2();
        thisElem.closest('.form_write').after(wrapper);
        //console.log(thisElem.closest('.form_write').after());
    });
});

如何使用select2进行以编程方式创建的select？

1 个答案: