Question

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

<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编写的案例陈述是否是最合适的方法？我怎么写这样的陈述？

默认情况下，需要隐藏三个输入字段。任何帮助将不胜感激。我在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

我认为不需要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 3

少数事情：

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 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>

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

5 个答案: