Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Hide DropDown options based on previous List(Radio)

  • Matadeleo
  • Matadeleo's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
2 years 10 months ago - 2 years 10 months ago #230221 by Matadeleo
Hide DropDown options based on previous List(Radio) was created by Matadeleo
Please help us help you and fill where relevant:
Your LimeSurvey version: Version 3.19.3+191023
Own server or LimeSurvey hosting: Own
Survey theme/template: Fruity
==================
I'm trying to hide options in a dropdown list, based on the answer given at a previous single choice question. I've attached an example file.

There are 3 locations in the test file, and 9 sublocations. There are 3 sublocations per location, e.g. Location 1 should only see Sublocation 1, 2 and 3. Location 2 should see Sublocation 4, 5 and 6.

Here is the code I'm currently playing around with, however I may be mis-using some JavaScript selectors.

Code:
<script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){
          // Get current and previous questions
          var thisQuestion = $('#question{QID}');
          var prevQuestion = thisQuestion.prev('.question-container');
 
           $(':radio', prevQuestion).on('change', function(i) {
            // Get value of previous question
            var selectedOption = $(':radio:checked', prevQuestion).val();
 
            // Hide answer options based on selectedOption
            if(selectedOption == 1) {
                $(thisQuestion . "option[value='4']").remove();
                $(thisQuestion . "option[value='5']").remove();
                $(thisQuestion . "option[value='6']").remove();
                $(thisQuestion . "option[value='7']").remove();
                $(thisQuestion . "option[value='8']").remove();
                $(thisQuestion . "option[value='9']").remove();
             } else if (selectedOption == 2) {
                $(thisQuestion . "option[value='1']").remove();
                $(thisQuestion . "option[value='2']").remove();
                $(thisQuestion . "option[value='3']").remove();
                $(thisQuestion . "option[value='7']").remove();
                $(thisQuestion . "option[value='8']").remove();
                $(thisQuestion . "option[value='9']").remove();
            } else if (selectedOption == 3) {
                $(thisQuestion . "option[value='1']").remove();
                $(thisQuestion . "option[value='2']").remove();
                $(thisQuestion . "option[value='3']").remove();
                $(thisQuestion . "option[value='4']").remove();
                $(thisQuestion . "option[value='5']").remove();
                $(thisQuestion . "option[value='6']").remove();
            }
        });
    });
</script>


At the moment I am unable to get the value from the previous question, and I'm assuming my code to remove options will also fail with syntax errors. Any help to get this working would be greatly appreciated!

 

File Attachment:

File Name: SublocationsTest.lss
File Size:35 KB
Last edit: 2 years 10 months ago by Matadeleo. Reason: Syntax highlighting

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 10 months ago #230226 by tpartner
Replied by tpartner on topic Hide DropDown options based on previous List(Radio)
I could not import that survey into 3.x. Are you sure about the LS version given above?

I don't think you want to remove the select options (unless you first clone the select element) in case the respondent changes the radio answer.

You should be able to hide them:

Code:
<script type="text/javascript" data-author="Tony Partner">
  $(document).on('ready pjax:scriptcomplete',function(){
      var thisQuestion = $('#question{QID}');
    var prevQuestion = thisQuestion.prev('.question-container');
 
       $('.answer-item :radio', prevQuestion).on('click', function(i) {
 
      // Reset the drop-down
      $('select.form-control').val('').trigger('change');
      $("select.form-control option", thisQuestion).show();
 
      // Get value of previous question
      var selectedValue = $(this).val();
 
      // Hide answer options based on selectedValue
      if(selectedValue == 1) {
        $("select.form-control option[value='4']", thisQuestion).hide();
        $("select.form-control option[value='5']", thisQuestion).hide();
        $("select.form-control option[value='6']", thisQuestion).hide();
        $("select.form-control option[value='7']", thisQuestion).hide();
        $("select.form-control option[value='8']", thisQuestion).hide();
        $("select.form-control option[value='9']", thisQuestion).hide();
       } else if (selectedValue == 2) {
        $("select.form-control option[value='1']", thisQuestion).hide();
        $("select.form-control option[value='2']", thisQuestion).hide();
        $("select.form-control option[value='3']", thisQuestion).hide();
        $("select.form-control option[value='7']", thisQuestion).hide();
        $("select.form-control option[value='8']", thisQuestion).hide();
        $("select.form-control option[value='9']", thisQuestion).hide();
      } else if (selectedValue == 3) {
          $("select.form-control option[value='1']", thisQuestion).hide();
        $("select.form-control option[value='2']", thisQuestion).hide();
        $("select.form-control option[value='3']", thisQuestion).hide();
        $("select.form-control option[value='4']", thisQuestion).hide();
        $("select.form-control option[value='5']", thisQuestion).hide();
        $("select.form-control option[value='6']", thisQuestion).hide();
      }
    });
  });
</script>

Sample survey for 5.x attached: 

File Attachment:

File Name: limesurvey...7535.lss
File Size:35 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: Matadeleo

Please Log in to join the conversation.

  • Matadeleo
  • Matadeleo's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
2 years 10 months ago #230229 by Matadeleo
Replied by Matadeleo on topic Hide DropDown options based on previous List(Radio)
Thanks Tony - looks like I sent you an example from a v5 server! Apologies for that.

I've tested this on Version 3.19.3 and Version 5.3.22 and it work perfectly on both.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 10 months ago #230230 by tpartner
Replied by tpartner on topic Hide DropDown options based on previous List(Radio)
...maybe a little easier to read and adjust (also a little more efficient):
 
 
Code:
<script type="text/javascript" data-author="Tony Partner">
  $(document).on('ready pjax:scriptcomplete',function(){
      var thisQuestion = $('#question{QID}');
    var prevQuestion = thisQuestion.prev('.question-container');
 
    // Define the excluded options
    var excludes = {
      '1': [4, 5, 6, 7, 8, 9],
      '2': [1, 2, 3, 7, 8, 9],
      '3': [1, 2, 3, 4, 5, 6]
    }
 
       $('.answer-item :radio', prevQuestion).on('click', function(i) {
 
      // Reset the drop-down
      $('select.form-control').val('').trigger('change');
      $("select.form-control option", thisQuestion).show();
 
      // Get value of previous question
      var selectedValue = $(this).val();
 
      // Hide answer options based on selectedValue
      $.each(excludes[selectedValue], function(i, val) {
        $('select.form-control option', thisQuestion).filter(function () { return $(this).val() == val; }).hide()
      });
    });
  });
</script>

Sample 5.x survey attached: 

File Attachment:

File Name: limesurvey...5(1).lss
File Size:34 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • Matadeleo
  • Matadeleo's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
2 years 10 months ago #230232 by Matadeleo
Replied by Matadeleo on topic Hide DropDown options based on previous List(Radio)
Thanks for this - much more elegant than how I originally laid it out 
[img

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source