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

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 就会变得非常简单。

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

<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();
 });

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();
   }
});

Answer 5

<script type="text/javascript">
               $('#type_of_bussiness').change(function(){
            var selection = $('#type_of_bussiness').val();
       
            if(selection==1)

               {
                  $('#typeofmargin').css('display','block');
               }
               if(selection==2){
                  $('#coloxxcomm').css('display','block');

               }            
                          
             
         });
      </script>