<script type="text/javascript" data-author="Tony Partner">
 
  $(document).ready(function() {
 
    var thisQuestion = $('#question{QID}');
 
    if($('.inserted-select', thisQuestion).length == 0) {
 
      // Define the dropdowns
      // Note: the dynamic dropdown keys should be a combination 
      // of the filter question values and the column positions
      var selects = {
        'filter': '<select class="inserted-select form-control">\
              <option value="">-- Please Choose --</option>\
              <option value="A">Brand A</option>\
              <option value="B">Brand B</option>\
              <option value="C">Brand C</option>\
            </select>',
        'A-3': '<select class="inserted-select form-control">\
              <option value="">-- Please Choose --</option>\
              <option value="A-3-1">Brand A feature 1</option>\
              <option value="A-3-2">Brand A feature 2</option>\
              <option value="A-3-3">Brand A feature 3</option>\
            </select>',
        'B-3': '<select class="inserted-select form-control">\
              <option value="">-- Please Choose --</option>\
              <option value="B-3-1">Brand B feature 1</option>\
              <option value="B-3-2">Brand B feature 2</option>\
              <option value="B-3-3">Brand B feature 3</option>\
            </select>',
        'C-3': '<select class="inserted-select form-control">\
              <option value="">-- Please Choose --</option>\
              <option value="C-3-1">Brand C feature 1</option>\
              <option value="C-3-2">Brand C feature 2</option>\
              <option value="C-3-3">Brand C feature 3</option>\
            </select>',
        'A-4': '<select class="inserted-select form-control">\
              <option value="">-- Please Choose --</option>\
              <option value="A-4-1">Brand A feature 2-1</option>\
              <option value="A-4-2">Brand A feature 2-2</option>\
              <option value="A-4-3">Brand A feature 2-3</option>\
            </select>',
        'B-4': '<select class="inserted-select form-control">\
              <option value="">-- Please Choose --</option>\
              <option value="B-4-1">Brand B feature 2-1</option>\
              <option value="B-4-2">Brand B feature 2-2</option>\
              <option value="B-4-3">Brand B feature 2-3</option>\
            </select>',
        'C-4': '<select class="inserted-select form-control">\
              <option value="">-- Please Choose --</option>\
              <option value="C-4-1">Brand C feature 2-1</option>\
              <option value="C-4-2">Brand C feature 2-2</option>\
              <option value="C-4-3">Brand C feature 2-3</option>\
            </select>'
      }
 
      // Some column-specific classes and attributes
      $('tr.subquestion-list', thisQuestion).each(function(i) {
        $('th, td', this).each(function(i) {
          $(this).addClass('column-'+i);
          $(this).attr('data-column', i);
        });
      });
 
      // Add some classes to the dynamic array cells
      $('td.column-2', thisQuestion).removeClass('text-item').addClass('filter-cell with-select dropdown-item');
      $('td.column-3', thisQuestion).removeClass('text-item').addClass('dynamic-cell with-select dropdown-item');
      $('td.column-4', thisQuestion).removeClass('text-item').addClass('dynamic-cell with-select dropdown-item');
 
      // Hide the text inputs (this could be done with CSS)
      $('.with-select :text', thisQuestion).hide();
 
      // Insert the filtering dropdown
      $('.filter-cell', thisQuestion).addClass('with-select').append(selects['filter']);      
 
      // Listeners on the dropdowns
      $('.answer-item.with-select', thisQuestion).on('change', '.inserted-select', function(i) {
        var thisCell = $(this).closest('.answer-item');
 
        // Set the value of the hidden text input
        var newValue = '';
        if($(this).val() != '') {
          newValue = $(this).val();
        }
        $('input:text', thisCell).val(newValue).trigger('change');
 
        // Specific to the filter dropdown
        if($(this).closest('.answer-item').hasClass('filter-cell')) {
 
          // Handle the dynamic dropdowns
          handleChildSelects($(this), true);
        }
      });
 
      // A function to handle the dynamic dropdowns
      function handleChildSelects(el, resetCell) {
        var thisRow = $(el).closest('tr');
        var filterValue = $(el).val();
 
        // Loop through the dynamic cells in this row
        $('.dynamic-cell', thisRow).each(function(i) {
 
          // Define the key for the dynamic dropdown
          var selectKey = filterValue+'-'+$(this).attr('data-column');
 
          // Reset this cell if the fiter question has changed
          if(resetCell) {
            $(':text', this).val('').trigger('change');
            $('.inserted-select', this).remove();
          }
 
          // Insert the dropdown
          $(this).append(selects[selectKey]);
 
          // Set the value of the dropdown
          if($(':text:eq(0)', this).val() != '') {
            $('.inserted-select', this).val($(':text:eq(0)', this).val());
          }
        });
      }
 
      // Returning to the page
      $('.filter-cell', thisQuestion).each(function(i) {
 
        if($(':text:eq(0)', this).val() != '') {
 
          // Set the value of the filter dropdown
          $('.inserted-select', this).val($(':text:eq(0)', this).val());
 
          // Handle the dynamic dropdowns
          handleChildSelects($('.inserted-select', this), false);
        }
      });
    }
  });
</script>