Question

I need help to consolidate/minify the code below. Originally I had a dropdown which controls div’s visibility based on value. It works onClick but since it’s a database page, it doesn’t work onLoad so I had to add a 2nd logic. Any suggestions/input is greatly appreciated.

$(document).ready(function () {
  var $caseStatus = $(this).find("#auth_status").val();
  //alert ($caseStatus);
  if ($caseStatus === "1") {
    $(".pendingClass").show();
    $(".authClass").hide();
  }
  else if ($caseStatus === "2") {
    $(".pendingClass").hide();
    $(".authClass").show();
  }
  else {
    $(".pendingClass").hide();
    $(".authClass").hide();
  }

  // Show/Hide Divs for Authorization Status
  $("#auth_status").click(function () {
    if ($(this).val() === "0") {
      $(".pendingClass").hide();
      $(".authClass").hide();
    }
    else if ($(this).val() === "1") {
      $(".pendingClass").show();
      $(".authClass").hide();
    }
    else if ($(this).val() === "2") {
      $(".pendingClass").hide();
      $(".authClass").show();
    }
  });
});

Answer 1

You could reduce your code a bit by simplifying your if/else structure(since anything besides "1" is the same show/hide result and also just call the handler you’re binding when the page first loads, like this:

$(function () {
  $("#auth_status").click(function () {
    var val = $(this).val();
    $(".pendingClass").toggle(val === "1");
    $(".authClass").toggle(val === "2");
  }).click();
});