时间戳

首页 > 解决方案 > Yii2 - 如何使用下拉列表隐藏块

jquery - Yii2 - 如何使用下拉列表隐藏块

问题描述

我正在尝试使用 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>

标签： jqueryhtmlcssyii2

解决方案

如图所示，我将 id 添加到下拉 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();
        }
    });
});

推荐阅读