Question

我正在为客户开发一个非常简单的Web表单，但是有些地方他们希望根据用户的选择显示子选项。

简单逻辑：

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。

如何根据用户选择有条件地使用jQuery显示表单元素

1 个答案: