选择选项：jQuery，Case和显示/隐藏表单字段 [英] Select options: jQuery, Case and show/hide form fields

问题描述

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

 < select id =business-type> 
< option value =1>独家交易者< / option> 
< option value =2>合作关系< / option> 
< option value =3>公共部门< / option> 
< option value =4>公共有限公司（Plc）< / option> 
< option value =5> Charity< / option> 
< / select> 
 
 //如果您是独家交易者（选择框中的选项1），则会出现这种情况
< div id =soletrader> 
< label for =税收> VAT号码< / label> 
< input type =textname =taxid =tax/> 
< / div> 
 
 //如果您是公共部门业务（选择框中的选项3），则应显示此内容
< div id =publicsector> 
< label for =urn> URN号码< / label> 
< input type =textname =urnid =urn/> 
< / div> 
 
 //如果您是慈善机构（选择框中的选项5），应显示此内容
< div id =charity> 
< label for =charityref>慈善参考编号< / label> 
< input type =textname =charityid =charityref/> 
< / div> 
  

使用jquery编写的case语句是否是对此问题最合适的方法？我将如何写这样的声明？

默认情况下，三个输入字段需要隐藏。任何援助将不胜感激。我对javascript / jquery很沮丧。 解决方案

首先，您应该为每个字段div添加class ='字段'。

然后，通过这段代码，您可以在下拉列表中选择/隐藏适当的字段：

<$ p $（$业务类型）。$（'＃业务类型'）。变化（函数（）{
var选择= $（'＃业务类型'）。val（）;
$（'。field'）。hide（）;
switch（selection）{
case 0：
$（'＃soletrader'）。show（）;
break;
案例1：
$（'＃publicsector'）。show（）;
break;
案例2：
$（'＃charity'）。show ）;
break;
}
}）;

What is the most efficient way of showing/hiding form fields based on the value of a select control? I have one select control and three input fields, which show/hide based upon what type of business you work for.

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

Would a case statement - written in jquery - be the most appropriate approach to this matter? How would I write such a statement?

The three input fields need to be hidden by default. Any assistance would be greatly appreciated. I am dismal at javascript/jquery.

解决方案

First, you should add "class='field'" to each field div.

Then, with this code, you will show/hide the appropriate field upon selction in the dropdown:

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

这篇关于选择选项：jQuery，Case和显示/隐藏表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！