title: Two scripts won't work at the same time
body: <p>There is probably a very simple explanation for this (and likely a much cleaner way to do it), but I'm new and can't quite figure it out. Any assistance would help the learning process...</p>
  
  <p>I have one script that displays one div or another based (<code>show</code> instead of <code>hide</code>) on what a user selects from a dropdown list. Like so:</p>
  
  <pre><code>var PickDiv = (function(){
  
  var _obj = {};
  
  var hideShow = function(elem){
      if($(elem).val() === '1'){
            $("#slider_action").show();
            $("#slider_dollar").hide();
          }else if($(elem).val() === '2'){
            $("#slider_dollar").show();    
             $("#slider_action").hide();
          }else{
            $("#slider_dollar, #slider_action").hide();
          }
  };
  
  _obj.checkValue = function(){
      hideShow($('#build_opt'))
  };
  
  var events = function(){
      $('#build_opt').change(function(){
         hideShow(this);
      });
  };
  
  $(document).ready(function(){
      events ();
      checkValue ();
  });
  
  return _obj;
  
  }());
  </code></pre>
  
  <p>This works great and displays the right div based on what is selected from the dropdown. I thought I could reuse this same idea later in my code to have the same effect. Once the div is displayed (after making a selection related to script above), I need to provide another dropdown with additional options. The user will select one of these and then a div will display. So, I figured, I could use something like this:</p>
  
  <pre><code>var RunRate = (function(){
  
  var _obj2 = {};
  
  var hideShow_2 = function(elem_2){
      if($(elem_2).val() === '6'){
            $("#db_sign").show();
            $("#app_down", "#in_redem", "#site_vis", "#cont_ent" ).hide();
          }else if($(elem_2).val() === '7'){
            $("#app_down").show();    
          else{
            $("#app_down", "#in_redem", "#site_vis", "#db_sign", "#cont_ent" ).hide();
          }
  };
  
  _obj2.checkValue_2 = function(){
      hideShow_2($('#action_type_2'))
  };
  
  var events_2 = function(){
      $('#action_type_2').change(function(){
         hideShow_2(this);
      });
  };
  
  $(document).ready(function(){
      events_2 ();
      checkValue_2 ();
  });
  
  return _obj2;
  
  }());
  </code></pre>
  
  <p>Of course, this doesn't work. I tried a number of different things with no luck. Note that if I exclude the first script from my code, the second script works fine, so I know it works. I'm guessing it has something to do with the two scripts sharing a variable or something about jquery that I'm clearly missing.</p>
  
  <p>Any help would be appreciated. Overall, looking to be able to do a number of these types of dependent dropdowns without interfering with one another.</p>
  
  <p>Thanks for your help!</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Note that if in the second script, I replace:</p>
  
  <pre><code>$(document).ready(function(){
  </code></pre>
  
  <p>with </p>
  
  <pre><code>$( window ).load(function() {
  </code></pre>
  
  <p>then the problem is solved. So, clearly the problem is related to the document.ready interfering with each other, but I don't know how to fix this without this "hack" above especially if I want to use more of these dependent dropdowns. Is there a way to pass a different variable and call that instead of <code>document</code>?</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>Figured out the problem...my original code was throwing an error due to an undefined reference (<code>checkValue</code>). That error was causing the document ready to not work in the second function. Referenced a more detailed explanation in my answer below.</p>