javascript - 如何动态更改 Laravel 表单

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

您需要绑定(bind)更改事件中的所有内容:

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