[英]show div depending on select option
Oh help, I've tried it a million different ways yet it still does not work: If you select update or final from a select/option box, it should show the div that has an input field in it. 哦,帮助,我已经尝试了一百万种不同的方法,但仍然无法使用:如果您从选择/选项框中选择了update或final,它将显示包含输入字段的div。 It only does what the default shows in the switch statement.
它仅执行默认值在switch语句中显示的内容。 Of course, it's only after a selection is made that I want it to determine whether it shows the input field or not.
当然,只有在做出选择后,我才希望它确定它是否显示输入字段。
in head section... 在头部...
$(document).ready(function(){
$('#needfilenum').hide();
var optionValue = $("#needtoshow").val();
switch (optionValue)
{
case 'update':
$("#needfilenum").show();
break;
case 'final':
$("#needfilenum").show();
break;
default:
$("#needfilenum").hide();
break;
}
});
//});
'<select id="needtoshow" >
<option id="dfaut" value="0">Select Something</option>
<option id="update" value="update">Update</option>
<option id="final" value="final">Final</option>
<option id="allergy"value="allergy">Vegan</option>
</select>
<div id="needfilenum" style="background:#f00;">
<input type="text" name="wharever" />
</div>
I can change the default on the switch and that seems to dictate what it shows also tried 我可以更改交换机上的默认设置,这似乎决定了它显示的内容也尝试过
// $("#needtoshow").change(function() {
// switch ($(this).val())
If you want to have the div show and hide when the drop-down changes, you need to bind to the change event, for example: 如果要在下拉列表更改时显示和隐藏div,则需要绑定到change事件,例如:
$(document).ready(function() {
$('#needfilenum').hide();
$('#needtoshow').bind('change', function() {
var optionValue = $("#needtoshow").val();
switch (optionValue)
{
case 'update':
case 'final':
$("#needfilenum").show();
break;
default:
$("#needfilenum").hide();
break;
}
});
});
In your code, the switch statement runs only once when the page first loads. 在您的代码中,当页面首次加载时,switch语句仅运行一次。
You probably want to bind an event listener on your select box. 您可能希望在选择框上绑定事件侦听器。 ( change event ) So you would have something along the lines of:
( 更改事件 )因此您将获得以下收益:
$("#oldfilenum").change(function() {
var optionValue = $(this).val();
switch (optionValue) {
case 'update':
$("#needfilenum").show();
break;
case 'final ':
$("#needfilenum").show();
break;
default:
$("#needfilenum").hide();
}
};
Try something like this: 尝试这样的事情:
var selectBox = $("#oldfilenum"), magicDiv = $("#needfilenum");
selectBox.bind("change", function() {
var val = this.value;
if (val === "update" || val === "final") {
magicDiv.show();
} else {
magicDiv.hide();
}
});
Of course you can use switch
instead, or have a []
of acceptable values and do it.indexOf(val) > -1
or whatever. 当然,您可以改用
switch
,也可以使用[]
可接受的值并执行它it.indexOf(val) > -1
或其他方法。
As Victor commented on another answer, change
fires on blur
in MSIE, so you may want to use another event if that is an issue, perhaps mouseup
. 正如Victor在另一个答案中所评论的那样,MSIE中的
blur
change
触发change
,因此如果这是一个问题,则您可能希望使用另一个事件 ,也许是mouseup
。
Your checking function runs only once, and not every time you change the select field. 您的检查功能仅运行一次,而不是每次更改选择字段时都运行。 You need to put an onchange handler into the select field:
您需要在选择字段中放置一个onchange处理程序:
<select id="needtoshow" onchange="your_function_name_here()">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.