在Ajax调用中更新multiselect字段时未选择multiselect

Question

我使用AdminLTE 2高级元素形式多选择。当我插入一个字段的表单使用多选它插入完美。

但是当我使用相同的形式更新多选择字段时，此时在选择输入标签中没有选择先前的插入值。它是在下拉菜单中选择的，我也不能更改所选字段。

我遵循这个选择文档

注意

ajax响应工作正常

cdn, css和javascript正确集成

我试过这些代码

<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更新方法

$('#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 1

这很简单，就像select2

$('#area_name_id').val('');

由替换

var areaSelect = $('#area_name_id');

Ajax请求是这样的

$('#area_name_id').val(responseData.tbl_area_id);
areaSelect.append(responseData.area_name_id).trigger('change');