如何更改动态幼虫表格

Question

我正在制作电视连续剧的网络应用程序。我想制作一个表格，以不同的标准搜索系列，如名称，创作者，流派......

我想动态地改变第二个输入。如果我想按名称搜索系列，输入是文本字段。如果我想按流派搜索，第二个输入是复选框。

我的代码：

 <!-- Ouverture du formulaire de recherche de série --> 
     {!! Form::open() !!} 

     <!-- Choix du type de recherche de série --> 
     <div class="form-group"> 
      <center>{!! Form::label('Type de recherche') !!}</center> 
      {!! Form::select('recherche', ['N' => 'Recherche par nom', 
              'G' => 'Recherche par genre', 
              'R' => 'Recherche par réalisateur'], 
      'G', ['class' => 'recherche select']); !!} 
     </div> 

     <!-- Champs de saisie du nom de la série recherchée --> 
     <div class="form-group nom"> 
      <center>{!! Form::label('Nom de la série recherchée') !!}</center> 
      {!! Form::text('nom', null, array('required', 'class'=>'form-control', 'placeholder'=>'Nom de la série')) !!} 
     </div> 

     <!-- Liste des checkboxs pour la recherche de séries par genre --> 
     <div class="form-group genre"> 
      <center>{!! Form::label('Nom du genre recherché') !!}</center> 
      Action{!! Form::checkbox('action', 'action') !!} 
      Western{!! Form::checkbox('western', 'western') !!} 
     </div> 

     <!-- Liste des checkboxs pour la recherche de séries par réalisateur --> 
     <div class="form-group realisateur"> 
      <center>{!! Form::label('Nom du réalisateur recherché') !!}</center> 
      Spielberg{!! Form::checkbox('Spielberg', 'Speilberg') !!} 
      Hanks{!! Form::checkbox('Hanks', 'Hanks') !!} 
     </div> 

     <!-- Bouton d'envoi du formulaire de recherche de série --> 
     {!! Form::submit('Rechercher', array('class'=>'btn btn-primary')) !!} 
     <!-- Fermeture du formulaire de recherche de série --> 
     {!! Form::close() !!} 

这JS代码不动态改变第二个输入。

if($('.recherche').val() != 'N'){ 
    $('.nom').hide(); 
} 
if($('.recherche').val() != 'G'){ 
    $('.genre').hide(); 
} 
if($('.recherche').val() != 'R'){ 
    $('.realisateur').hide(); 
} 

Answer 1

您需要在更改事件绑定的一切：

$(".recherche").change(function() { 
    ..... 
});