Как условно отображать элементы формы с помощью jQuery на основе выбора пользователя

Question

Я разрабатываю веб-форму для клиента, которая довольно проста, но есть места, где они хотят, чтобы подопции появлялись в зависимости от выбора пользователя.

Простая логика:

if user chooses this,
    display these sub-options, 
if other choice > these sub-options, 
if another choice > other sub-options

Так что я приведу пример. Есть поле выбора, где пользователи выбирают «готовый тип» для своего заказа. В этом поле есть 10 опций, 6 из них имеют несколько подопций (в основном это радио кнопки Y / N, но у некоторых есть текстовый ввод или другое поле выбора), а у некоторых из них есть более глубокие уровни подопций, которые могут отображать в зависимости от того, что выбирает пользователь.

У меня есть группы подопций внутри <div>, который по умолчанию скрыт.

Когда пользователь выбирает соответствующую опцию из поля выбора, соответствующий div подопций должен .slideDown(). Когда будет выбрано что-то еще, это будет .slideUp().

Вот что у меня есть (что, очевидно, неполно) - подробное описание под кодом:

jQuery(document).ready(function($) {
    $("#finished_types").change(function() {
        switch ($(this).val()) {
            case "Saddle Stitching" :
                $("#saddle_stitching").slideDown("fast");
                break;

            case "Loose Leaf / 4 Side Trim" :
                break;

            case "Perfect Binding" :
                break;

            case "Wire-O" :
                break;

            case "Plastic Coil" :
                break;

            case "Collating Only" :
                break;

            case "Folding Only" :
                break;

            case "Corner Stitching" :
                break;

            case "Side Stitching" :
                break;

            default:
                $("#saddle_stitching").slideUp("fast");
                $("#loose_leaf").slideUp("fast");
                $("#perfect_binding").slideUp("fast");
                $("#wire_o").slideUp("fast");
                $("#plastic_coil").slideUp("fast");
                $("#collating_only").slideUp("fast");
                $("#folding_only").slideUp("fast");
                $("#corner_stitching").slideUp("fast");
                $("#side_stitching").slideUp("fast");
        }
    }).change();        
});

Самым сложным для меня является то, что я также хочу, чтобы ВСЕ поля подопций были сброшены / очищены, если пользователь выбирает другой Готовый тип из поля выбора (в основном, когда они скрыты). Я чувствую, что должен быть способ сделать это, вызывая другую функцию или более, вместо того, чтобы кодировать ее в каждом случае коммутатора и делать все намного больше, чем нужно.

Кроме того, есть ли разница в кодировании нижних уровней подопций или это будет в значительной степени то же самое?

Спасибо всем, кто нашел время, чтобы прочитать этот большой беспорядок. Заранее спасибо за любую помощь!

Answer 1

Используйте классы.Поэтому вместо:

<div id="saddle_stitching">foo</div>
<div id="loose_leaf">bar</div>
<div id="perfect_binding">hello</div>
<div id="wire_o">world</div>

Попробуйте:

<div id="saddle_stitching" class="extra_option">foo</div>
<div id="loose_leaf" class="extra_option">bar</div>
<div id="perfect_binding" class="extra_option">hello</div>
<div id="wire_o" class="extra_option">world</div>

В этом сценарии вы можете просто сделать:

jQuery('.extra_option').slideUp('fast');

Вместо перечисления всех различных id s.