I am using AdminLTE 2
advanced element form multi select. When I insert a field of a form using multi select it inserts perfectly.
But when I update that multi select field using same form, the previous insert values are not selected in select input label at this moment. It is selected in dropdown and I can’t change the selected field also.
I follow this Select2 Doc
Note
ajax response is working properly
cdn, css and javascript integrated properly
I have tried these code
<div class="form-group" id="security_add"> <label for="inputEmail3" class="col-sm-5 control-label">Select Area Name:</label> <div class="col-sm-7"> <select class="form-control2 select2" multiple="multiple" name="area_name_id[]" id="area_name_id"> <option value="">-Selecr-</option> <option value="1">Bangladesh</option> <option value="2">USA</option> <option value="3">UK</option> <option value="4">UAE</option> <option value="5">Canada</option> <option value="6">India</option> <option value="7">Pakistan</option> </select> </div> </div>
Javascript
$(document).ready( function () { $('.select2').select2() } );
Ajax Update Method
$('#area_name_id').val(''); $.ajax({ type:"post", url:"./cc/area.php", data: { id: row_id, conditional_value: 1 }, success:function(response){ $('#area_name_id').val(responseData.tbl_area_id); $('#area_name_id').trigger('change'); } });
Advertisement
Answer
This is very simple like select2
$('#area_name_id').val('');
Replace by
var areaSelect = $('#area_name_id');
Ajax Request looks like this
$('#area_name_id').val(responseData.tbl_area_id); areaSelect.append(responseData.area_name_id).trigger('change');