Yii2 - How to Hide and Show Div Class using Dropdownlist
Multi tool use
Clash Royale CLAN TAG#URR8PPPYii2 - 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.
