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）为控制器中的id创建AJAX请求获取课程详细信息的动作，并将响应格式设置为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'); 
    }); 
}); 

要了解更多关于如何用JavaScript工作Yii2组织，请参考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()]); 
    }); 
});