javascript - 如何动态更改Laravel形式

我正在制作电视连续剧上的网络应用。我想制作一个表格来搜索具有不同条件的系列，例如名称，创作者，类型...

我想动态更改第二个输入。如果要按名称搜索系列，则输入为文本字段。如果要按类型搜索，则第二个输入为复选框。

我的代码：

        <!-- 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();
}

最佳答案

您需要在change事件中绑定所有内容：

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