Реализация зависимого DropdownList в Yii2

disel

Чтобы сделать так, чтобы выбор в первом выпадающем списке (DropdownList) влиял на содержимое второго, вам нужно использовать JavaScript для обработки события изменения первого списка и обновления второго списка на основе выбранного значения. Вот как это можно реализовать:

  1. Создайте два DropdownList: Один для id_activitestudy, а другой для id_activework. Второй список будет обновляться в зависимости от выбора в первом.
  2. Добавьте JavaScript для обработки изменения: Используйте AJAX для получения данных для второго списка на основе выбранного значения первого списка.

Вот пример кода:

php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use yii\widgets\ActiveForm;
use yii\web\View;
 
// Начало формы
$form = ActiveForm::begin();
 
// Первый DropdownList
echo Html::dropDownList('id_activitestudy', null,
    ArrayHelper::map(Activitestudy::find()->all(), 'id_activitestudy', 'name'),
    [
        'prompt' => 'Выберите критерий оценки',
        'id' => 'id-activitestudy', // Добавляем ID для использования в JavaScript
    ]
);
 
// Второй DropdownList
echo $form->field($model, 'id_activework')->dropDownList([], ['prompt' => 'Выберите активную работу', 'id' => 'id-activework']);
 
// Завершение формы
ActiveForm::end();
?>
 
<?php
// JavaScript для обновления второго DropdownList
$script = <<< JS
$('#id-activitestudy').change(function() {
    var idActivitestudy = $(this).val();
    $.ajax({
        url: 'index.php?r=activework/get-activeworks', // Укажите правильный URL для вашего контроллера
        data: {id: idActivitestudy},
        success: function(data) {
            $('#id-activework').html(data);
        }
    });
});
JS;
$this->registerJs($script, View::POS_READY);
?>

Контроллер

Теперь вам нужно создать метод в вашем контроллере, который будет обрабатывать AJAX-запрос и возвращать список активных работ в формате HTML:

php

1
2
3
4
5
6
7
8
9
public function actionGetActiveworks($id)
{
    $activeworks = Activework::find()->where(['id_activitestudy' => $id])->all();
    $items = ArrayHelper::map($activeworks, 'id_activework', 'name');
 
    foreach ($items as $key => $value) {
        echo "<option value='$key'>$value</option>";
    }
}

Объяснение

  • Первый DropdownList: Содержит список критериев оценки. При выборе элемента происходит событие change.
  • AJAX-запрос: Когда пользователь выбирает элемент в первом списке, отправляется AJAX-запрос на сервер, который возвращает соответствующие активные работы.
  • Второй DropdownList: Обновляется с новыми данными, полученными от сервера.

Теперь, когда вы выберете элемент в первом выпадающем списке, второй список будет автоматически обновляться в зависимости от вашего выбора!

Похожие записи/страницы: