如何使用jQuery和HTML表单元素来实现复杂魔术

Question

我正在为使用Wordpress和Contact Form 7插件的客户端开发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单选按钮，但有些选项有文本输入或另一个选择框），其中一些选项可以显示更深层次的子选项取决于用户选择的内容。

我是一个初学jQuery的人，所以这可能有点过头了，但我觉得我对自己想做的事情有一个好主意，我只是没有语法。

无论如何，我有一组默认隐藏的<div>内的子选项组。 当用户从选择框中选择相应的选项时，子选项对应的div应为.slideDown()。当选择其他东西时，它将会是.slideUp()。

这里是我到目前为止（这显然是不完整） - 下面的代码更多的描述：

jQuery(document).ready(function() { 
    jQuery("#finished_types").change(function() { 
     value = jQuery(this).val(); 
     switch (value) { 
      case "Saddle Stitching" : 
       jQuery("#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: 
       jQuery("#saddle_stitching").slideUp("fast"); 
       jQuery("#loose_leaf").slideUp("fast"); 
       jQuery("#perfect_binding").slideUp("fast"); 
       jQuery("#wire_o").slideUp("fast"); 
       jQuery("#plastic_coil").slideUp("fast"); 
       jQuery("#collating_only").slideUp("fast"); 
       jQuery("#folding_only").slideUp("fast"); 
       jQuery("#corner_stitching").slideUp("fast"); 
       jQuery("#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！而非。