选择选项：jQuery，Case和show / hide表单字段

根据select控件的值显示/隐藏表单字段的最有效方法是什么？ 我有一个选择控件和三个输入字段，根据您工作的业务类型显示/隐藏。

 Sole Trader Partnership Public Sector Public Limited Company (Plc) Charity  // This should appear if you are a Sole Trader (option 1 in the select box) 
 VAT Number  
 // This should appear if you are a Public Sector business (option 3 in the select box) 
 URN Number  
 // This should appear if you are a Charity (option 5 in the select box) 
 Charity Reference No.   

一个案例陈述 – 用jquery编写 – 是否是最合适的方法？ 我该怎么写这样的陈述？

默认情况下，需要隐藏三个输入字段。 任何帮助将不胜感激。 我在javascript / jquery上很沮丧。

Answer 1

首先，您应该为每个字段div添加“class =’field’”。

然后，使用此代码，您将在下拉列表中显示/隐藏选择的相应字段：

 $('#business-type').change(function(){ var selection = $('#business-type').val(); $('.field').hide(); switch(selection){ case 0: $('#soletrader').show(); break; case 1: $('#publicsector').show(); break; case 2: $('#charity').show(); break; } }); 

Answer 2

一些事情：

1）我会在每个附加字段中添加一个类（我在下面使用.additional-field）。 这将允许您一举将它们全部隐藏起来，而不是明确要求每个$.hide() 。 只有三个，这并不是那么糟糕，但如果你最终得到更多，那么它会变得很快。

2）我将代码放在一个函数中，并在页面加载时调用该函数并将其用作.change()的参数。 这样可以节省重复相同的代码，并涵盖编辑现有代码或需要更正的表单中的错误的初始值。 否则，在您选择其他内容然后再次选择该项目之前，附加字段将不会显示。

 $(document).ready(function(){ function toggleBusinessTypeAdditionalFields() { $('.additional-field').hide(); var selected = $('#business-type').val(); switch (selected) { case 1: $('#soletrader').show(); break; case 3: $('#publicsector').show(); break; case 5: $('#charity').show(); break; } } toggleBusinessTypeAdditionalFields(); $('#business-type').change(toggleBusinessTypeAdditionalFields); }); 

Answer 3

我认为不需要if / switch语句。 使用更多HTML标记帮助您的JavaScript。 如果在每个div上放置一个名为“data-val”的属性，并为其指定希望它随之出现的选项的值，则JS变得非常简单。

所以你的HTML对于div来说看起来像这样：

 
 VAT Number   

然后你的JS将是：

  $('select').change(function(){ var val = $(this).val(); $('div').hide().filter('[data-val=' + val + ']').show(); }); 

Answer 4

将这些函数放在$.ready(function(){});

 $('#soletrader').hide(); $('#publicsector').hide(); $('#charity').hide(); $('#business-type').change(function(){ var value = $(this).val(); if(value == '1'){ $('#soletrader').show(); $('#publicsector').hide(); $('#charity').hide(); } else if(value == '3'){ $('#soletrader').hide(); $('#publicsector').show(); $('#charity').hide(); } else if(value == '5'){ $('#soletrader').hide(); $('#publicsector').hide(); $('#charity').show(); } else { $('#soletrader').hide(); $('#publicsector').hide(); $('#charity').hide(); } });