Yii2 - 根据表单上的下拉选择在表单上显示/隐藏字段

Question

我是 Yii2 的新手，我一直在尝试研究如何根据带有客户端验证的 dropDownList 选择来隐藏/显示表单上的某些字段。

基本上我有一个模型和表单视图来收集与“候选人”相关的信息，我希望应用以下逻辑：

1. 仅当 'qualification_id' 的 dropDownList 选择 = 2 时才显示字段 'assigned_to' 和 'phone'。

2. 如果 'qualification_id' = 2（其他可选），则需要字段 'assigned_to' 和 'phone'

我的代码如下，虽然没有按我的需要工作。客户端验证不起作用（即当qualification_id = 2 时不需要'assigned_to' 和'phone'）。我无法弄清楚如何根据“qualification_id”选择动态隐藏/显示字段。我认为这需要一些 javascript。

任何帮助将不胜感激！

型号：

namespace frontend\models;

use Yii;

/**
 * This is the model class for table "candidate".
 *
 * @property int $candidate_id
 * @property string $name
 * @property int $qualification_id
 * @property string $assigned_to
 * @property string $phone

    public static function tableName()
    {
        return 'candidate';
    }


    public function rules()
    {
        return [
            [['candidate_id', 'qualification_id', 'name'], 'required']
            [['candidate_id', 'qualification_id'], 'integer'],
            [['name', 'assigned_to’, 'phone’], 'string'],

            [['assigned_to', 'phone'],'required','when'=>function($model){
            
                return ($model->qualification_id == 2);
                },
                                    
            'whenClient'=>"function(attribute, value){
                    return $('#qualification_id').val() == 2; 
                                    
                 }"],

查看（表格）：

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use frontend\models\QualificationType;

/* @var $this yii\web\View */
/* @var $model frontend\models\Candidate */
/* @var $form yii\widgets\ActiveForm */

?>


<div class="candidate-form">

    <?php $form = ActiveForm::begin(); ?>


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


    <?= $form->field($model, 'qualification_id')->dropDownList(
        ArrayHelper::map(QualificationType::find()->all(),'qualification_id','qualification'),
        [
        'prompt'=>'Select...',
        'id' => 'review_type_id', 
        'onchange' => 'changeQualification()'
]
    ) ?>

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

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

    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    
    </div>

    <?php ActiveForm::end(); ?>

</div>

<?php

    $script = <<<JS
    function changeQualification() {
      if ($('#qualification_id').val() == 2) {
       $('#assigned_to').show();
       $('#name).show();

      } else {

       $('#assigned_to).hide();
       $('#name).hide();
      }
    }
    JS;

    $this->registerJs($script);

    ?>

Answer 1

请这样尝试

在视图中

<div class="candidate-form">
        <?php $form = ActiveForm::begin(); ?>
        <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
        <?= $form->field($model, 'qualification_id')->dropDownList(
            ArrayHelper::map(QualificationType::find()->all(),'qualification_id','qualification'),
            ['prompt'=>'Select...', 'id' => 'qualification_id', 'onchange' => 'changeQualificationType()']
        ) ?>
    
        <?= $form->field($model, 'assigned_to)->textInput(['id' => 'assigned_to_Input', 'maxlength' => true]) ?>
    
        <?= $form->field($model, 'phone')->textInput(['id' => 'phone_input', 'maxlength' => true]) ?>
    
        <div class="form-group">
            <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
        
        </div>
    
        <?php ActiveForm::end(); ?>
    
    </div>



<?php
$script = <<<JS
    function changeQualificationType() {
      if ($('#qualification_id').val() == 2) {
       $('#assigned_to_input').closest('.form-group').show();
       $('#phone_input').closest('.form-group').show();
      } else {
       $('#assigned_to_input').closest('.form-group').hide();
       $('#phone_input').closest('.form-group').hide();
      }
    }
JS;
$this->registerJs($script);

在模型中

public function rules()
    {
        return [
            [['candidate_id', 'qualification_id', 'name'], 'required']
            [['candidate_id', 'qualification_id'], 'integer'],
            [['name', 'assignedTo, 'phone’], 'string'],

            [['assignedTo', 'phone'],'required','when'=>function($model){
            
                return ($model->qualification_id == 2);
                },
                                    
            'whenClient'=>"function(attribute, value){
                    return $('#qualification_id').val() == 2; 
                                    
                 }"],

不要忘记在 ActiveFormField 中设置自定义 id。所有字段id都需要与Jquery和Model的函数相匹配。