选择选项: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屋!