Skip to content Skip to sidebar Skip to footer

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 i

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"