2015-12-10 5 views
0

Я хочу заполнить динамически созданный выбор и инициализировать select2 library (https://select2.github.io) на нем. У меня есть этот HTML код структуру:Как использовать select2 для программно созданного select?

<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); 
    }); 
}); 

Select создает, но он скрыт, не могу понять, что я пропустил?

+2

Вы пробовали после добавления опции? –

+0

спасибо, после добавления вариантов проблема решена! –

ответ

0

Проблема была в том, что я инициализировал 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()); 
    }); 
});