Показать только конкретные критерии поиска в html-форме

Question

Мне нужна форма, содержащая поля критериев. Эти критерии могут быть типа «affaire» или «suite». Для этого выбора я использую раскрывающийся список (см. Снимок экрана ниже). Основываясь на этом типе, я хотел бы отображать только определенные поля критериев.

Для типа "Affaire", у меня есть следующие критерии:

• Статут AFFAIRE
• Libelle
В деле
• Numéro d'афера
• титр де l'афера
• Примечание de l'affaire

Для типа "люкс", у меня есть следующие критерии:

• Статут люкс
• Libelle люкс
• Numéro де Люкс
• титр де-ла-люкс
• Примечание де-ла-люкс

В данный момент я показываю только поля критериев "affaire" моя форма. Что-то вроде этого:

@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" /> 

} 

Первый DropDownListFor (... Model.Type) используется для различения поиска типа «Affaire» или «люкс». Я хотел бы иметь возможность скрывать поля критериев «affaire» и показывать поля критериев «suite» на основе значения этого раскрывающегося списка. Каков наилучший способ достичь этого?

Спасибо.

Answer 1

я бы, вероятно, просто использовать обработчик события на стороне клиента и переключить видимость элементов ..

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

Просто образец кода .. есть много больше вы можете сделать, чтобы сделать это более элегантно.