Kartik selec2小部件在Yii2的Ajax请求中不能工作 - Kartik select2 widget not working in Ajax request in Yii2?

Kartik select2 widget not working in Ajax request in Yii2?

我在我的yii2基本应用程序中使用kartik select2小部件。现在我必须在ajax调用的select2小部件中显示省份名称。它的工作很好，如果我把它直接在形式。但是不能使用ajax调用。

以下是我的表单字段:

<?= $form->field($model, 'role')->dropDownList(
    ArrayHelper::map(SubAdminRoles::find()->all(), 'id', 'role_name'),
    [
        'prompt' => 'Select Role',
        'onchange' => '
            if($(this).val() != 3) {
                $( "#user_area" ).html("showLoading");
                $.post( "fetch-area-list?id='.'"+$(this).val(), 
                function(data) {
                    $( "#user_area" ).html(data);
                })
            }'
    ]
    ) ?>
 <div id="user_area">
</div>

这是我的动作代码

public function actionFetchAreaList($id) {
   // $this->layout = 'none';
    $data = [];
    if($id == 1) {
        $provinceList = 'app'modules'adminpanel'models'ProvinceMaster::findAll(['status' => 1, 'is_deleted' => 0]);
        foreach($provinceList as $obj) {
            $data[$obj['id']] = $obj['province_name'];
        }
        //print_r($data);
        //exit;
    } else if($id == 2) {
        $subDistrictList = 'app'modules'adminpanel'models'SubDistrictMaster::findAll(['status' => 1, 'is_deleted' => 0]);
        foreach($subDistrictList as $obj) {
            $data[$obj['id']] = $obj['sub_district_name'];
        }
    }
    echo '<label class="control-label">Select Province</label>';
    echo Select2::widget([
        'name' => 'state_2',
        'value' => '1',
        'data' => $data,
        'options' => ['multiple' => true, 'placeholder' => 'Select Province']
    ]);
    exit;
}

现在当我试图通过ajax获得它时，我带有display:none属性，所以我无法显示我的select2框。

我也尝试改变display:none显示:块在select2类。在这种情况下，我得到了选择框，但只是简单的html多重选择框，而不是select2小部件。

如何获得它从控制器使用ajax调用?

在action中呈现html是不好的做法。在这种情况下，小部件需要相关的JS进行初始化。但这不会包括在你的回答中。移动所有html以查看area-list并使用以下代码进行渲染:

public function actionFetchAreaList($id) {
    $this->layout = false;
    // ... preparing data
    return $this->renderAjax('area-list', [
        // ... some view data
    ]);
}

方法renderAjax呈现一个命名的视图，并注入所有注册的JS/CSS脚本和文件。它通常用于响应AJAX Web请求。

我也有类似的项目。我有2个组合框(使用select2)。从第一个组合框中选择一个地区时。它将调用一个ajax请求来获取省份列表并填充到第二个组合框中。下面是我的解决方案:

在表单

使用javascript调用ajax请求并更改第二个组合框的数据。我的控制器响应数据json格式。

$('#district-selector').on('change', function() {
    var districtId = $(this).val();
    var url = $(this).attr('tb_href');
    $('#province-selector').html('');
    $.get(
        url,
        {
            city_id: districtId
        },
        function(response) {
            if (response.error == 0 && response.data.length) {
                $('#province-selector').append(new Option('', ''));
                $.each(response.data, function() {
                    console.log(this.id + '--' + this.title);
                    var newOption = new Option(this.title, this.id);
                    $('#province-selector').append(newOption);
                });
            }
            $('#province-selector').trigger('change');
        }
    );
});

Demo: Demo link