I cannot be able to make two dropdowns on yii2 php website pull interdependent data

Question

I am getting ths error Object of class yii\widgets\ActiveForm could not be converted to string below is the snipet of the controller where the issue might be

  $campusList = ArrayHelper::map(TblCollege::find()->all(), 'name', 'name');
        return $this->render('view_probation', [
        'model' => new \yii\base\DynamicModel(['campus', 'program']),
//            'model' => $model,
        'collegeList' => $campusList,
    ]);

and here is the view

 $form = ActiveForm::begin();
                    echo $form->field($model, 'college_id')->widget(Select2::classname(), [
                        'data' => $collegeList,
                        'options' => ['placeholder' => 'Select a college', 'id' => 'college_id'],
                        'pluginOptions' => [
                            'allowClear' => true,
                        ],
                    ]);

                    // Second Select2 for Programs
                    echo $form->field($model, 'program_id')->widget(Select2::classname(), [
                        'options' => ['placeholder' => 'Select a program', 'id' => 'program_id'],
                        'pluginOptions' => [
                            'allowClear' => true,
                            'depends' => ['college_id'],
                            'url' => Url::to(['common/list_program_curry_bycampuss']),
                        ],
                    ]);

and here is the javascript

$this->registerJs('
    // JavaScript to hide the loader initially
    $("div#loader").hide();

    $("#college_id").on("change", function() {
        var collegeId = $(this).val();
        if (collegeId) {
            $.ajax({
                url: "' . Url::to(['common/list_program_curry_bycampuss']) . '",
                type: "GET",
                data: {collegeId: collegeId},
                success: function(data) {
                    // Parse the received JSON data
                    var programsData = JSON.parse(data);

                    // Convert data to the format expected by Select2
                    var options = programsData.map(function(item) {
                        return {id: item.id, text: item.text};
                    });

                    // Populate the program dropdown
                    $("#program_id").html("").select2({data: options});
                }
            });
        } else {
            // Reset program dropdown if college is not selected
            $("#program_id").html("").select2({data: {}});
        }
    });

I want when i select campus, the second dropdown populates with programs for the campus selected