Yii2下的select2实现二级联动
时间: 2023-08-19 15:10:38 浏览: 212
yii2中dropDownList实现二级和三级联动写法
在Yii2中使用Select2实现二级联动可以通过以下步骤实现:
1. 首先在视图文件中引入Select2组件:
```php
use yii\helpers\Html;
use kartik\select2\Select2;
```
2. 定义一个数组来存储一级选项的数据,假设我们的数组为$parentData:
```php
$parentData = ['1' => 'Parent 1', '2' => 'Parent 2', '3' => 'Parent 3'];
```
3. 在视图文件中使用Select2组件来渲染一级选项:
```php
echo $form->field($model, 'parent_id')->widget(Select2::classname(), [
'data' => $parentData,
'options' => ['placeholder' => 'Select parent'],
]);
```
4. 定义一个二维数组来存储二级选项的数据,假设我们的数组为$childData:
```php
$childData = [
'1' => ['1-1' => 'Child 1-1', '1-2' => 'Child 1-2'],
'2' => ['2-1' => 'Child 2-1', '2-2' => 'Child 2-2', '2-3' => 'Child 2-3'],
'3' => ['3-1' => 'Child 3-1'],
];
```
5. 在视图文件中使用jQuery脚本来实现二级联动:
```php
$script = <<< JS
$(document).ready(function() {
$('#model-parent_id').on('change', function() {
var parent_id = $(this).val();
var childData = $.parseJSON('{$childData}');
$('#model-child_id').html('');
$.each(childData[parent_id], function(id, name) {
var opt = $('<option/>').attr('value', id).text(name);
$('#model-child_id').append(opt);
});
});
});
JS;
$this->registerJs($script);
```
6. 在视图文件中使用Select2组件来渲染二级选项:
```php
echo $form->field($model, 'child_id')->widget(Select2::classname(), [
'options' => ['placeholder' => 'Select child'],
]);
```
注意,我们在二级选项的Select2组件中并没有设置数据源,而是通过jQuery脚本来动态生成选项。此外,我们还需要在一级选项的Select2组件中添加`id`属性,以便在jQuery脚本中使用`$('#model-parent_id')`来获取选项的值。
以上就是使用Select2实现Yii2下的二级联动的步骤。
阅读全文