Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Hide the array option base on previous answer

  • kevinleung
  • kevinleung's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 years 4 months ago #209732 by kevinleung
Hi all,

May I know if we can hide the options base on previous answer?


In this example, the respondent who select "Yes" will be needed to answer "Rate".
Is it possible to hide the answer option if they select "No"? (Or display "Rate" if they select "Yes")

I found a similar example:
forums.limesurvey.org/forum/design-issue...cells-with-condition
However, it needed to split into 2 questions.

Thank you!
Kevin
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 months ago #209737 by tpartner
Replied by tpartner on topic Hide the array option base on previous answer
LimeSurvey version?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • kevinleung
  • kevinleung's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 years 4 months ago #209780 by kevinleung
Replied by kevinleung on topic Hide the array option base on previous answer
Version 3.21.1, thanks!
The topic has been locked.
  • kevinleung
  • kevinleung's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 years 4 months ago #209831 by kevinleung
Replied by kevinleung on topic Hide the array option base on previous answer
Hi tpartner, May I know if you have any suggestion? thank you!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 months ago #209836 by tpartner
Replied by tpartner on topic Hide the array option base on previous answer
Yes.

Code:
<script type="text/javascript" charset="utf-8">
 
 
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    // Insert selects into column 2
      $(' .answer_cell_c', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
        <option value="">Please select</option>\
        <option value="1">Yes</option>\
        <option value="2">No</option>\
      </select>');
 
    // Insert selects into column 3
      $(' .answer_cell_d', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
        <option value="">If Yes...</option>\
        <option value="1">1</option>\
        <option value="2">2</option>\
        <option value="3">3</option>\
      </select>');   
 
    // Listeners on select elements
    $('.inserted-select', thisQuestion).on('change', function(i) {
      if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
 
      // 3rd column conditional on 2nd column
      if($(this).closest('.answer-item').hasClass('answer_cell_c')) {
         handleColumn3($(this));
      }
    });
 
    function handleColumn3(thisSelect) {
      var thisRow = $(thisSelect).closest('tr.subquestion-list');
      var item3 = $('.answer_cell_d', thisRow);
      if($(thisSelect).val() == '1') {
        $('.inserted-select', item3).prop('disabled', false);
      }
      else {
        $('.inserted-select', item3).val('').prop('disabled', true);
        $('input:text', item3).val('').trigger('change');
      }      
    }
 
    // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
      $('select.inserted-select', thisCell).val(selectval);
 
      // 3rd column conditional on 2nd column
      if($(this).closest('.answer-item').hasClass('answer_cell_c')) {
         handleColumn3($('select.inserted-select', thisCell));
      }
    });
 
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...3(1).lss
File Size:23 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose