2 ddls one dependent on another

by Annie Lagang

HTML

<!-- 
<h4><span>Scenario 1: DF + D</span></h4> 

<form name="form1"><fieldset>
<legend>Departure</legend>
<select class="dayDisrupted_1_DF-D-"></select>
<select class="monthDisrupted_1_DF-D-"></select>
</fieldset></form>

<form name="form2"><fieldset>
<legend>Return</legend>
<select class="dayDependent_2_DF-D-"></select>
<select class="monthDependent_2_DF-D-"></select>
</fieldset></form>

<br /> <br />
<h4><span>Scenario 2: D + DF</span></h4> 

<form name="form3"><fieldset>
<legend>Departure</legend>
<select class="dayDependent_1_D-DF-"></select>
<select class="monthDependent_1_D-DF-"></select>
</fieldset></form>

<form name="form4"><fieldset>
<legend>Return</legend>
<select class="dayDisrupted_2_D-DF-"></select>
<select class="monthDisrupted_2_D-DF-"></select>
</fieldset></form>
-->
<br /> <br />
<h4><span>Scenario 3: DF + DF</span></h4> 

<form name="form5"><fieldset>
<legend>Departure</legend>
** correct behavior: May option should not be shown (controlled by cs)<br />
<select class="dayDisrupted_1_DF-DF-"></select> 
<select class="monthDisrupted_1_DF-DF-"></select>
</fieldset></form>

<form name="form6"><fieldset>
<legend>Return</legend>
 ** incorrect behavior: OnLoad April should show 1 - 30 (selected day is 11)<br />
<select class="dayDisrupted_2_DF-DF-"></select>
<select class="monthDisrupted_2_DF-DF-"></select>
</fieldset></form>

JavaScript

var origDateArr = ["11/2015-03", "11/2015-04"];
var minDateArr = ["09/2015-02", "12/2015-03"];
var maxDateArr = ["10/2015-04", "11/2015-05"];
var daysInterval = 2;

// START: Initialize ddls
$(function(){  
  // dependent flight will only be enabled if disrupted flight is checked
  $(".disruptedFlight").change(function() {
      var checkbox = $(this);
      if (checkbox.is(':checked'))
      {
          $(".dependency").attr('disabled',false);
      }
      else
      {
          $(".dependency").attr('disabled',true);
      }
   });
    
   var monthDisrupted = $("select[class*='monthDisrupted']");
   var monthDependent = $("select[class*='monthDependent']"); 
   var dayDisrupted = $("select[class*='dayDisrupted']");
   var dayDependent = $("select[class*='dayDependent']");
    
    // initialize month-year ddl
    populateMonthYear(monthDisrupted, 3);    
    if (monthDependent.is(':visible'))
    {
        populateMonthYear(monthDependent, 3);
    } 
    
    // intialize day ddl
    setDayDropOrig(monthDisrupted, dayDisrupted);
    if (dayDependent.is(':visible'))
    {
        setDayDropOrig(monthDependent, dayDependent);
    }
    
    // ENABLE THIS ONLY IF SCENARIO BEING TESTED IS NOT DF + DF
    // recompute days on month-year ddl change
    /*monthDisrupted.change(function() {        
        dayDisrupted.empty();
        setDayDropOrig($(this), dayDisrupted); 
    });
    
    monthDependent.change(function() {
        if (monthDependent.is(':visible'))
        {
            dayDependent.empty();
            setDayDropOrig($(this), dayDependent);
        }        
    });*/
    
    // prepopulate original values: DF - DF
    var origDateValue = origDateArr[0].split('/');
    $(dayDisrupted[0]).val(origDateValue[0]); 
    $(monthDisrupted[0]).val(origDateValue[1]);
    
    origDateValue = origDateArr[1].split('/');
    $(dayDisrupted[1]).val(origDateValue[0]); 
    $(monthDisrupted[1]).val(origDateValue[1]);
    
    // prepopulate original values:...