Yii2 - 如何使用下拉列表隱藏塊

Question

我試圖隱藏並使用Dropdownlist更改事件在我的Yii2項目中顯示div，我已經嘗試過這段代碼，但它似乎對我不起作用。 當我點擊study_centre_id Dropdownlist onchange事件時，它什么都不做。 如果有人能指出我犯錯的地方，我將不勝感激。 提前致謝。

調節器

public function actionIndex()
{
    $model = new Programme();       
    $model->scenario = 'import-programme';

    return $this->render('index', [
        'model' => $model,
    ]);
}

視圖

 <div class="box-info box box-solid view-item col-xs-12 col-lg-12 no-padding"> <div class="box-header with-border"> <h3 class="box-title"><i class="fa fa-file-excel-o"></i> <?php echo Yii::t('app', 'Select File'); ?></h3> </div><!--./box-header--> <div id="showProgramImport" style="display:none"> <div class="box-body"> <div class="row"> <div class="col-sm-12 col-xs-12"> <?= $form->field($model, 'importFile')->fileInput(['title' => Yii::t('app', 'Browse Excel File')])->label(false) ?> </div> </div> <div class="row"> <div class="col-sm-12 col-xs-12"> <div class="callout callout-info"> <h4><?php echo Yii::t('app', 'You must have to follow the following instruction at the time of importing data'); ?></h4> <ol> <li><b><?php echo Yii::t('app', 'The field with red color are the required field cannot be blank.'); ?></b></li> <li><?php echo Yii::t('app', 'The file must be CSV format.'); ?></li> </ol> <h5><?php echo Yii::t('app', 'Download the sample format of Excel sheet.'); ?> <b><?= Html::a(Yii::t('app', 'Download'), ['download-file', 'id' => 'SSF']) ?></b></h5> </div><!--./callout--> </div><!--./col--> </div><!--./row--> </div><!--./box-body--> <div class="box-footer"> <?= Html::submitButton('<i class="fa fa-upload"></i>'.Yii::t('app', ' Import'), ['class' => 'btn btn-primary']) ?> </div> </div> <div id="showProgram" style="display:block"> <div class="box-body"> <div class="row"> <div class="col-sm-12 col-xs-12"> <div class="callout callout-danger"> <h4><?php echo Yii::t('app', 'You Need to Select a Study Centre.'); ?></h4> </div><!--./callout--> </div><!--./col--> </div><!--./row--> </div><!--./box-body--> </div> </div><!--./box--> 

 <script> $(function () { $(document).ready(function() { $("#study_centre_id").change(function () { if ($(this).val() == 1) { // It doesn't work over here. $("#showProgramImport").show(); $("#showProgram").hide(); } else { $("#showProgramImport").hide(); $("#showProgram").show(); } }); }); }); </script> 

下拉列表代碼

        <div class="col-xs-12 col-sm-6 col-lg-6">
        <?= $form->field($model, 'state_office_id')->widget(Select2::classname(), [
            'data' => ArrayHelper::map(\common\models\StateOffice::find()->where(['is_status' => 0])->all(),'id','state_name'),
            'language' => 'en',
            'options' => ['placeholder' => '--- Select State Office ---', 
                'onchange'=>'
                    $.get( "'.Url::toRoute('dependent/getstudycentre').'", { id: $(this).val() } )
                        .done(function( data ) {
                            $( "#'.Html::getInputId($model, 'study_centre_id').'" ).html( data );
                        }
                    );' 
            ],
         //   'disabled'=>'true',
            'pluginOptions' => [
                'allowClear' => true
            ],
        ]); ?>                            

    </div>
    <div class="col-xs-12 col-sm-6 col-lg-6">
        <?= $form->field($model, 'study_centre_id')->widget(Select2::classname(), [
        'data' => ArrayHelper::map(\common\models\StudyCentre::findAll(['state_office_id' => $model->state_office_id]),'id','study_centre_name'),
            'language' => 'en',
            'options' => ['placeholder' => '--- Select Study Centre ---'],
            'pluginOptions' => [
                'allowClear' => true
            ],
        ]); ?>             
    </div>  

Answer 1

我將id添加到dropdown div中，如圖所示

    <div id="study_centre_id" class="col-xs-12 col-sm-6 col-lg-6">
    <?= $form->field($model, 'study_centre_id')->widget(Select2::classname(), [
    'data' => ArrayHelper::map(\common\models\StudyCentre::findAll(['state_office_id' => $model->state_office_id]),'id','study_centre_name'),
        'language' => 'en',
        'options' => ['placeholder' => '--- Select Study Centre ---'],
        'pluginOptions' => [
            'allowClear' => true
        ],
    ]); ?>             
</div>  

然后，將我的腳本更改為

<script>
$(document).ready(function() {
    $("#study_centre_id").change(function () {
            if ($(this).find(':selected').val() != 0) {
            $("#showProgramImport").show();
            $("#showProgram").hide();
        } else {
            $("#showProgramImport").hide();
            $("#showProgram").show();
        }
    });
});