如何使用户隐藏和取消隐藏yii2表单中的一些下拉列表

Question

I am trying to create a search form where I want to have a few of the dropdownlist fields in the form hidden. And if the user chooses to they can unhide it (like advanced search options). Is there a way to do this in yii2? or do I have to use like javascript or jquery?

Also is there a way to define the size of the dropdown list field. I know if you use

textInput([style'=>'width:100px']); 

that will word for a input text field but what about for a drop down field

<?php 
$form = ActiveForm::begin([
'id' =>'-search-form-inline',
'formConfig'=>['showlabels' =>false],
'type'=> ActiveForm::TYPE_INLINE
]); 
?>
<div>
  <?php 
    echo $form->field($model, 'spec')
    ->dropDownList(
        $specialities,    
        ['prompt'=>'Any Speciality']  
    )->label('Speciality');
  ?>

  <?php 
    echo $form->field($model, 'zipcode')
    ->textInput(['maxlength'=>10,'style'=>'width:100px']);
  ?>
</div>

  <?php 
    echo $form->field($model, 'proc')
    ->dropDownList(
        $procedures,   
        ['prompt'=>'Any Procedures / Tests']  
    )->label('Procedures/Tests');
  ?>

  <?php echo $form->field($model, 'minc')
    ->dropDownList(
        $mincash,      
        ['prompt'=>'Any Min']   
    )->label('Minimum')
     ->Input(['maxlength'=>10,'style'=>'width:100px']);
  ?>

  <?php echo $form->field($model, 'maxc')
    ->dropDownList(
        $maxcash,       
        ['prompt'=>'Any Max']   
    )->label('Maximum');
  ?>

Answer 1

This is a first example. Here we using container div which is hidden by default.

<?php
$this->registerJs("
    $('#extended-search-lnk').on('click', function(e){
        e.preventDefault();
        $('#extended-search').toggle();
    })
");
?>
<a href="#" id="extended-search-lnk">Extended Search</a>
<div id="extended-search" style="display: none;">
  <?php echo $form->field($model, 'minc')
    ->dropDownList(
        $mincash,      
        ['prompt'=>'Any Min']   
    )->label('Minimum')
     ->Input(['maxlength'=>10,'style'=>'width:100px']);
  ?>
</div>

And this is the second. Here we toggle visibility of specified dropdowns

<?php
$minc_attr_id = Html::getInputId($model, 'minc');

$this->registerJs("
    $('#extended-search-lnk').on('click', function(e){
        e.preventDefault();
        $('#".$minc_attr_id."').toggle();
    })
");
?>
<a href="#" id="extended-search-lnk">Extended Search</a>
<?php echo $form->field($model, 'minc')
  ->dropDownList(
      $mincash,      
      ['prompt'=>'Any Min']   
  )->label('Minimum')
   ->Input(['maxlength'=>10,'style'=>'width:100px']);
?>