Yii2更新表单中下拉框选中值填充嵌套动态表单字段问题
解决Yii2动态嵌套表单更新时学生下拉框数据异常问题
问题分析
更新场景下,页面初始化时已加载保存的ASC center和学生数据,但已存在的学生下拉框未关联当前选中ASC的过滤规则,导致点击下拉框时显示所有学生,而非对应ASC下的学生。核心原因是初始化阶段没有为已渲染的学生下拉框绑定动态加载逻辑,也未根据当前ASC ID筛选数据。
解决方案步骤
1. 初始化时为已有学生下拉框绑定过滤逻辑
页面加载完成后,针对已渲染的学生下拉框,根据当前选中的ASC center ID重新触发学生列表加载:
$(document).ready(function() { // 获取当前选中的ASC center ID var ascId = $('#your-asc-selector').val(); // 遍历所有已存在的学生下拉框 $('.student-dropdown-class').each(function() { loadStudentList(ascId, $(this)); }); // 保留ASC选择变化的监听逻辑 $('#your-asc-selector').on('change', function() { var newAscId = $(this).val(); $('.student-dropdown-class').each(function() { loadStudentList(newAscId, $(this)); }); }); }); // 封装学生列表加载函数 function loadStudentList(ascId, dropdown) { if (!ascId) { dropdown.empty().append('<option value="">请选择学生</option>'); return; } $.ajax({ url: '/student/student-list', type: 'GET', data: {asc_id: ascId}, success: function(data) { dropdown.empty().append('<option value="">请选择学生</option>'); $.each(data, function(key, value) { dropdown.append('<option value="' + value.id + '">' + value.name + '</option>'); }); // 恢复更新时已选中的学生值 var selectedId = dropdown.data('selected-id'); if (selectedId) dropdown.val(selectedId); } }); }
2. 嵌套表单渲染时传递已选中学生ID
在_form-studentdata.php中,为学生下拉框添加data-selected-id属性,保存已选中的学生ID:
<?php use yii\helpers\Html; use yii\widgets\ActiveForm; $form = ActiveForm::begin(['id' => 'student-form']); ?> <?= $form->field($model, "[{$index}]student_id")->dropDownList( [], [ 'class' => 'student-dropdown-class', 'data-selected-id' => $model->student_id, 'prompt' => '请选择学生' ] ) ?> <?php ActiveForm::end(); ?>
3. 优化StudentList动作的参数校验
确保接口仅返回对应ASC的学生数据:
public function actionStudentList() { Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; $ascId = Yii::$app->request->get('asc_id'); if (!$ascId) return []; $students = Student::find() ->where(['asc_center_id' => $ascId]) ->select(['id', 'name']) ->asArray() ->all(); return $students; }
4. 动态添加表单时保持逻辑一致
在wbraganca/dynamicform的afterInsert事件中,为新增的下拉框绑定加载逻辑:
$('#dynamic-form').on('afterInsert', function(e, item) { var ascId = $('#your-asc-selector').val(); var newDropdown = $(item).find('.student-dropdown-class'); loadStudentList(ascId, newDropdown); });
验证效果
更新页面加载后,已存在的学生下拉框会自动根据当前ASC加载对应学生列表并恢复选中状态;切换ASC时,所有下拉框(含已存在和新增)都会同步更新数据。
内容的提问来源于stack exchange,提问作者Prashant
相关产品推荐
相关产品推荐

