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

Question

我使用的是AdminLTE 2advanced element form multi-select。当我使用multi-select插入表单的一个字段时，它可以完美地插入。

但是当我使用相同的表单更新多选择字段时，此时在选择输入标签中不会选择以前的插入值。它是在下拉列表中选择的，我也不能改变选择的字段。

我遵循这个选择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');