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

根据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编写的case语句是解决这个问题的最合适的方法吗？我将如何撰写这样一份声明

---

默认情况下，这三个输入字段需要隐藏。如蒙协助，将不胜感激。我对javascript/jquery感到沮丧。

将这些函数放入您的$.readyfunction{}

---

首先，您应该向每个字段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;
    }
});

---

我认为没有必要使用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>

几件事：

1我将添加一个我使用的类。下面的附加字段添加到每个附加字段。这将允许您一下子将它们全部隐藏起来，而不是要求您显式地隐藏每个$。只有三个并不坏，但如果你最终得到更多，它会很快变得毛茸茸的

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

});

---

这不是只适用于兼容html5的浏览器吗？？？而且这只会隐藏而不显示所选内容。抱歉，这意味着将.show放在JS最后一行的末尾。我对它进行了适当的编辑。关于HTML5的问题，不，这在所有浏览器中都适用。虽然数据属性在技术上是HTML5规范，但它仍然可以工作。事实上，您甚至不必使用HTML5中指定的数据XXX结构。您可以随意命名属性，也就是说，您仍然可以在JS/jQuery中访问它。我个人一直在使用数据属性，通常是为了回显json编码的字符串，然后由JS解析。@maxedison，如果我想展示的话，如何处理这个字符串。。。当我在下拉列表中选择选项3或选项5时？感谢Kostas和所有其他人的回复。你的回答非常有帮助，这是你的功劳。

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

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

});

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