У меня есть модальный Bootstrap с выпадающим списком select2 внутри:
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
<div class="form-group">
<label class="control-label col-md-3">Artist</label>
<div class="col-md-9">
<select name="artist" class="form-control" id="dropartist"></select>
<span class="help-block"></span>
</div>
</div>
функция при вызове bootrap для установки выпадающего меню:
$('#modal_form').on('shown.bs.modal', function () {
console.log("OK");
$.ajax({
type: "POST",
//data: {dropartist: dropartist},
url: 'Manage/get_artists',
dataType: 'json',
success: function(response) {
var $el = $("#dropartist");
$el.empty(); // remove old options
var len = response.length;
for( var i = 0; i<len; i++){
var id = response[i]['id'];
var name = response[i]['name'];
$el.append("<option value='"+id+"'>"+name+"</option>");
}
}
});
});
Функция для загрузки данных в Bootstrap:
function edit(id){
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
//Ajax Load data to modal
$.ajax({
url : "<?php echo base_url('Manage/edit')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="id"]').val(data.id);
$('[name="name"]').val(data.name);
$("#dropartist").val(data.artistid).trigger("change"); //select dropdown default
$('[name="reason"]').val(data.reason);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Artist'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
Я пытаюсь выбрать раскрывающийся список, но он не работает.Как мне решить эту проблему?Большое спасибо за ваше время и помощь в этом вопросе.