Display only specific search criteria in an html form

I would like a form containing criteria fields. These criteria can be of type "affaire" or "suite". For this choice, I use a dropdownlist (see screenshot below). Based on this type, I would like to display only specific criteria fields.

For the type "affaire", I have the following criteria:

• Statut affaire
• Libellé affaire
• Numéro d'affaire
• Titre de l'affaire
• Note de l'affaire

For the type "suite", I have the following criteria:

• Statut suite
• Libellé suite
• Numéro de suite
• Titre de la suite
• Note de la suite

At this moment, I only display "affaire" criteria fields in my form. Somet开发者_运维百科hing like this:

@using (Html.BeginForm("SearchAffaires", "Search", FormMethod.Post)) { 

    @Html.LabelFor(m => Model.SearchType)
    @Html.DropDownListFor(m => Model.SearchType, Model.Type)

    @Html.LabelFor(m => Model.SearchCriteriaAffaire.IdAffaire)
    @Html.TextBoxFor(m => Model.SearchCriteriaAffaire.IdAffaire)


    @Html.LabelFor(m => Model.SearchCriteriaAffaire.IdStatus)
    @Html.DropDownListFor(m => Model.SearchCriteriaAffaire.IdStatus, Model.Status)

    @Html.LabelFor(m => Model.SearchCriteriaAffaire.Title)
    @Html.TextBoxFor(m => Model.SearchCriteriaAffaire.Title)

    <input type="submit" id="buttonSubmit" value="Submit" />
    <input type="button" id="buttonClear" value="Clear" />

}

The first DropDownListFor(...Model.Type) is used to distinguish the search of type "affaire" or "suite". I would like to be able to hide "affaire" criteria fields and show "suite" criteria fields based on the value of this dropdown. What is the best way to achieve this?

Thanks.

I'd probably just use a client-side event handler and toggle the elements' visibility..

$('#searchType').change(function() {
    var value = $('#searchType option:selected').val();
    if (value === 'affaire') {
        $('.affaireCriteria').show();
        $('.suiteCriteria').hide();
    }
    else {
        $('.affaireCriteria').hide();
        $('.suiteCriteria').show();
    }
});

Just sample code.. there's plenty more you can do to make this more elegant.