<script type="text/javascript" charset="utf-8">    
 
  $(document).ready(function(){  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Assign column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) { 
      $('> *:gt(0)', this).each(function(i){
        $(this).addClass('column-'+(i+1));
        $(this).attr('data-column', i+1);
      });
    });
 
    // Hide the text inputs in columns 1
    $('.column-1 input[type="text"]', thisQuestion).hide();
 
    // Define the select element (dropdown)
    var select1 = '<select class="inserted-select"> \
              <option value="">-- Bitte, wählen --</option> \
              <option value="1">Europa</option> \
              <option value="2">Afrika</option> \
              <option value="3">Asien</option> \
              <option value="4">Amerika</option> \
              <option value="5">Australien</option> \
            </select>';
 
    // Insert the select elements into column 2
    $('.answer-item.column-1').append(select1);
 
    // Initial dropdown values in column 2 (if the question has already been answered)
    $('.answer-item.column-1 input[type="text"]').each(function(i){
      if($.trim($(this).val()) != '') {
        $(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
      }
    });
 
    // Listener on the dropdowns (insert selected values into hidden text input)
    $('.inserted-select').change(function() {
      var thisInput = $(this).closest('td').find('input[type="text"]');
      $(thisInput).val($(this).val());
      checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
    });
    // Some clean-up styles (could be placed in template.css
    $('select', thisQuestion).css({
      'border': '2px solid #dce4ec',
      'padding': '0.7em',
      'border-radius': '4px'
    });
 
  });
</script>
<style type="text/css">.text-right{ text-align:left;}
</style>