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. It only does what the default shows in the switch statement. 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"valu开发者_如何学Goe="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:

$(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.

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.

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.

You should look into the change() event. Attach that to your <select> and then perform your logic.

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()">