Clash Royale CLAN TAG

Yii2 - How to Hide and Show Div Class using Dropdownlist

I have this form as show below

When study centre Dropdownlist is onchange, when no value is selected, the search criteria should hide. But when a value is selected, is should show. The search criteria should hide by default.

Controller

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

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


<?php $form = ActiveForm::begin([
'id' => 'import-programme',
'enableAjaxValidation' => false,
'options' => ['enctype' => 'multipart/form-data'],
]); ?>


View

<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-search"></i> <?php echo Yii::t('app', 'Select Criteria'); ?></h3>
</div>
<div class="box-body no-padding">


<div class="col-xs-12 col-sm-6 col-lg-6">
<?= $form->field($model, 'state_office_id')->widget(Select2::classname(), [
'data' => ArrayHelper::map(commonmodelsStateOffice::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(commonmodelsStudyCentre::findAll(['state_office_id' => $model->state_office_id]),'id','study_centre_name'),
'language' => 'en',
'options' => ['placeholder' => '--- Select Study Centre ---'],
'pluginOptions' => [
'allowClear' => true
],
]); ?>
</div>
</div>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.