Yii2 - 如何从 DropDownList 更新 textInput 值

Question

我在 Yii2 上遇到问题了： 我想根据下拉列表中所选选项的更改将值插入到 textInput 字段中。这是我的代码：

<?= $form->field($model,   'course_taken')->dropDownList(ArrayHelper::map(Courses::find()->all(),'course_code','course_code')) ?>

<?= $form->field($model, 'course_details')->textInput(['maxlength' => true]) ?>

因此，当用户从下拉列表中选择课程时，textInput 将显示所选行的课程详细信息。 course_taken 和 course_details 都是来自同一个数据库表的列。 提前致谢。

Answer 1

您可以在 JavaScript 的帮助下完成。

1) 为 AJAX 请求创建操作，以通过控制器中的 id 获取课程详细信息，并将响应格式设置为 JSON。我更喜欢使用ContentNegotiator，而不是在渲染之前设置它：

use yii\web\Response;

...

Yii::$app->request->format = Response::Format_JSON;

但您也可以使用这种方法作为替代方法。

use yii\web\Response;

...

/**
 * @inheritdoc
 */
public function behaviors()
{
    return [
        [
            'class' => ContentNegotiator::className(),
            'only' => ['get-course-details'],
            'formats' => [
                'application/json' => Response::FORMAT_JSON,
            ],
        ],
    ];
}

/**
 * @param $id
 * @return array
 * @throws NotFoundHttpException
 */
public function actionGetCourseDetails($id)
{
    $model = $this->findModel($id);

    return ['courseDetails' => $model->course_details];
}

/**
 * @param integer $id
 * @return YourModel
 * @throws NotFoundHttpException
 */
protected function findModel($id)
{
    if (($model = YourModel::findOne($id)) !== null) {
        return $model;
    } else {
        throw new NotFoundHttpException('This course does not exist.');
    }
}

添加一些 JavaScript：

$('#select-id').change(function() {
    $.get('get-course-details', function(data) {
        $('#text-input-id').text(data.courseDetails);
    }).fail(function() {
        alert('Failed to get course details');
    });
});

要详细了解 Yii2 中如何使用 JavaScript，请参阅官方文档中的 Assets 部分。

当然，您可以通过添加加载微调器或类似的东西等来改进这一点，但这只是一个基本示例。

2) 如果课程细节量少，文本也小，你可以急切地把它包含在DOM中的某个地方，例如选项的数据属性中("data-course-details" = ...)，然后得到就是这样：

$('#select-id').change(function() {
    var courseDetails = $(this).find(":selected").data('course-details');
    $('#text-input-id').text(courseDetails);        
});

3) 与 2) 类似的方法是在初始加载时使用一个 AJAX 请求立即加载数据，并将其存储在变量而不是 DOM 中。

/**
 * @param $id
 * @throws NotFoundHttpException
 */
public function actionGetCourseDetails()
{
    $models = YourModel::find()->all();   
    $list = ArrayHelper::map($models, 'course_code', 'course_details');

    return ['courseDetails' => $list];
}

详细信息由代码索引，因此您可以轻松检索它：

$(function() {
    var courseDetails;

    loadCourseDetails();

    function loadCourseDetails() {
        $.get('get-course-details', function(data) {
            var courseDetails(data.courseDetails);
        }).fail(function() {
            alert('Failed to get course details');
        });
    }    

    $('#select-id').change(function() {
        $('#text-input-id').text(courseDetails[$this.val()]);
    });
});