选择选项：jQuery、Case 和显示/隐藏表单字段

Question

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

<select id="business-type">
  <option value="1">Sole Trader</option>
  <option value="2">Partnership</option>
  <option value="3">Public Sector</option>
  <option value="4">Public Limited Company (Plc)</option>
  <option value="5">Charity</option>
</select>

// This should appear if you are a Sole Trader (option 1 in the select box)
<div id="soletrader">
<label for="tax">VAT Number</label>
<input type="text" name="tax" id="tax" /> 
</div>

// This should appear if you are a Public Sector business (option 3 in the select box)
<div id="publicsector">
<label for="urn">URN Number</label>
<input type="text" name="urn" id="urn" />   
</div>

// This should appear if you are a Charity (option 5 in the select box)
<div id="charity">
<label for="charityref">Charity Reference No.</label>
<input type="text" name="charity" id="charityref" />    
</div>

用 jquery 编写的 case 语句会是解决这个问题的最合适的方法吗？我该怎么写这样的声明？

默认情况下需要隐藏三个输入字段。任何帮助将不胜感激。我对 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 就变得非常简单了。

因此，对于 div，您的 HTML 看起来像这样：

<div id="soletrader" data-val="1">
    <label for="tax">VAT Number</label>
    <input type="text" name="tax" id="tax" /> 
</div>

然后你的 JS 将是：

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