时间戳

首页 > 解决方案 > 在 Ajax 调用中更新多选字段时未选择多选

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

问题描述

我正在使用AdminLTE 2高级元素表单多选。当我使用多选插入表单字段时，它会完美插入。

但是，当我使用相同的表单更新该多选字段时，此时未在选择输入标签中选择先前的插入值。它在下拉列表中被选中，我也无法更改所选字段。

我按照这个Select2 Doc

笔记

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');
        
    }
});

标签： javascriptphpjqueryajax

解决方案

这很简单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');

推荐阅读