Show Div Depending On Select Option
Solution 1:
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:
$(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.
Solution 2:
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();
}
};
Solution 3:
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.
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
.
Solution 4:
You should look into the change() event. Attach that to your <select>
and then perform your logic.
Solution 5:
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:
<select id="needtoshow" onchange="your_function_name_here()">
Post a Comment for "Show Div Depending On Select Option"