javascript - Multi select is not selected when updating multiselect field in Ajax call
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');
}
});
Answer
Solution:
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');
Source