I am trying to hide and show div in my Yii2 project using Dropdownlist change event, i have tried this code, but it doesn’t seem to work for me. When I click on study_centre_id Dropdownlist onchange event, it does nothing. I will appreciate if anyone could point at where i am making mistakes. Thanks in advance.
7682
Controller
public function actionIndex()
{
$model = new Programme();
$model->scenario = 'import-programme';
return $this->render('index', [
'model' => $model,
]);
}
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-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>