Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Multiple dropdown options embedded in a list (radio)

  • polbarbe95
  • polbarbe95's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
2 years 8 months ago #229534 by polbarbe95
Multiple dropdown options embedded in a list (radio) was created by polbarbe95
Please help us help you and fill where relevant:
Your LimeSurvey version: 5.3.17
Own server or LimeSurvey hosting: LimeSurvey hosting
Survey theme/template: Fruity
==================

Good afternoon, 

Recently I applied this code to merge a dropdown menu into a radio (list) question. However, I would like to include another dropdown menu in the same question (so two dropdown menus in the radio list question). Is there any way to simply add this option?

Thank you in advance,
Attachments:

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 8 months ago #229540 by tpartner
Replied by tpartner on topic Multiple dropdown options embedded in a list (radio)
This script will insert the drop-downs from two following list-dropdown questions into the first two answer items of a list-radio questions.

Code:
<script type="text/javascript" data-author="Tony Partner">  
 
  $(document).on('ready pjax:scriptcomplete',function(){
    // The text for the "Please choose" option
    var chooseText = {
      'en': 'Please choose...',
      'de': 'Bitte auswählen...',
      'fr': ' Veuillez choisir ...'
    }
    // Identify the questions
    var qID = '{QID}';
    var thisQuestion = $('#question'+qID);
    var nextQuestion = $(thisQuestion).nextAll('.list-dropdown:eq(0)');
    var nextQuestion2 = $(thisQuestion).nextAll('.list-dropdown:eq(1)');
 
    var lang = $('html').attr('lang');
 
    // Hide the next questions
    nextQuestion.hide();
    nextQuestion2.hide();
 
    // Move the dropdowns
    $('.answer-item.radio-item:eq(0)', thisQuestion).addClass('with-dropdown').append($('.answer-item', nextQuestion));
    $('.answer-item.radio-item:eq(1)', thisQuestion).addClass('with-dropdown').append($('.answer-item', nextQuestion2));
 
    // Cleanup styles
    $('.answer-item.radio-item .answer-item', thisQuestion).css({
      'display': 'inline-block',
      'margin-left': '1em',
      'padding': '0'
    });
 
    function handleOther() {
      $.each($('.answer-item.with-dropdown', thisQuestion), function(i) {
        if($(':radio:checked', this).length == 0) {
          $('.answer-item', this).hide();
          $('.answer-item input[type="hidden"]', this).val('');
          $('.answer-item select', this).val('').trigger('change');
        }
        else {
          $('.answer-item', this).show();
        }
      });
    }
 
    // Initial states
    handleOther();
    var iChooseText = chooseText['en'];
    if(lang in chooseText) {
      iChooseText = chooseText[lang];
    }
    $.each($('select.form-control', thisQuestion), function(i) {
      if($('option[value=""]', this).length == 0) {
        $(this).prepend('<option value="">'+iChooseText+'</option>');
      }
    });
 
    // Listener on the radios
    $('.answer-item.radio-item :radio', thisQuestion).on('click', function(e) {
      handleOther();
    });    
  });
</script>

Sample survey attached:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: polbarbe95

Please Log in to join the conversation.

  • polbarbe95
  • polbarbe95's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
2 years 8 months ago #229542 by polbarbe95
Replied by polbarbe95 on topic Multiple dropdown options embedded in a list (radio)
Thank you so much tpartner. That worked out nicely and perfectly!!

All the very best, 

 

Please Log in to join the conversation.

  • polbarbe95
  • polbarbe95's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
2 years 8 months ago #229707 by polbarbe95
Replied by polbarbe95 on topic Multiple dropdown options embedded in a list (radio)
Good afternoon, 

I do have a follow-up question. It is possible to leave the dropdown box permanently there? Right now it only appears if the given option is selected. I would like to have the dropdown option there whether the option is selected or not. 

Many thanks in advance, 

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 7 months ago #229812 by tpartner
Replied by tpartner on topic Multiple dropdown options embedded in a list (radio)
This script will insert the drop-downs and eave them visible. A listener is placed on the drop-downs so if a value is selected, the corresponding radio is clicked.

Code:
<script type="text/javascript" data-author="Tony Partner">  
 
  $(document).on('ready pjax:scriptcomplete',function(){
    // The text for the "Please choose" option
    var chooseText = {
      'en': 'Please choose...',
      'de': 'Bitte auswählen...',
      'fr': ' Veuillez choisir ...'
    }
    // Identify the questions
    var qID = '{QID}';
    var thisQuestion = $('#question'+qID);
    var nextQuestion = $(thisQuestion).nextAll('.list-dropdown:eq(0)');
    var nextQuestion2 = $(thisQuestion).nextAll('.list-dropdown:eq(1)');
 
    var lang = $('html').attr('lang');
 
    // Hide the next questions
    nextQuestion.hide();
    nextQuestion2.hide();
 
    // Move the dropdowns
    $('.answer-item.radio-item:eq(0)', thisQuestion).addClass('with-dropdown').append($('.answer-item', nextQuestion));
    $('.answer-item.radio-item:eq(1)', thisQuestion).addClass('with-dropdown').append($('.answer-item', nextQuestion2));
 
    // Cleanup styles
    $('.answer-item.radio-item .answer-item', thisQuestion).css({
      'display': 'inline-block',
      'margin-left': '1em',
      'padding': '0'
    });
 
    // Initial states
    var iChooseText = chooseText['en'];
    if(lang in chooseText) {
      iChooseText = chooseText[lang];
    }
    $.each($('select.form-control', thisQuestion), function(i) {
      if($('option[value=""]', this).length == 0) {
        $(this).prepend('<option value="">'+iChooseText+'</option>');
      }
    });
 
    // Listener on the radios
    $('.answer-item.radio-item :radio', thisQuestion).on('click', function(e) {
      $.each($('.answer-item.with-dropdown', thisQuestion), function(i) {
        if($(':radio:checked', this).length == 0) {
          $('.answer-item input[type="hidden"]', this).val('');
          $('.answer-item select', this).val('').trigger('change');
        }
      });
    });  
 
    // Listener on the dropdowns
    $('.answer-item.with-dropdown select', thisQuestion).on('change', function(e) {
      if($(this).val() != '') {
        $(this).closest('.radio-item').find(':radio').trigger('click');
      }
    });    
  });
</script>

Sample survey attached: 

File Attachment:

File Name: limesurvey...4(1).lss
File Size:123 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: polbarbe95

Please Log in to join the conversation.

  • polbarbe95
  • polbarbe95's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
2 years 7 months ago #229875 by polbarbe95
Replied by polbarbe95 on topic Multiple dropdown options embedded in a list (radio)
It worked perfectly once again. I end up using this code in a multiple choice question. I replaced all radio to checkbox and it worked out!

Many thanks tparner!!

Please Log in to join the conversation.

  • polbarbe95
  • polbarbe95's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
2 years 7 months ago #230074 by polbarbe95
Replied by polbarbe95 on topic Multiple dropdown options embedded in a list (radio)
I realized there is a sort of an issue. When you click on the box, you cannot select an option from the dropdown menu. The way to proceed is to select an option form the dropdown menu and then the box is checked. That could be misleading to some users as they would expect to click the box and then select an option from the dropdown menu. 

I could not figure out how to solve this issue, 

All tips are welcome:)

Many thanks!

Please Log in to join the conversation.

  • polbarbe95
  • polbarbe95's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
2 years 7 months ago #230075 by polbarbe95
Replied by polbarbe95 on topic Multiple dropdown options embedded in a list (radio)
Never mind! I could solve it. You have to delete from the listener on the dropdown the following bit in the last line: .trigger('click')

Please Log in to join the conversation.

  • polbarbe95
  • polbarbe95's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
2 years 7 months ago #230256 by polbarbe95
Replied by polbarbe95 on topic Multiple dropdown options embedded in a list (radio)
I am still having issues with the merged dropdowns in a multiple choice question. Right now, If I select an answer option from the dropdown menu, the checkbox is automatically selected. However, if I first check the checkbox and then select an option from the dropdown menu, the checkbox is unchecked after I have made the selection from the dropdown. That could be an issue to users who would expect first to check the checkbox and then select a country. 

Let me know if you need any further clarification, 

All the best, 

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 7 months ago #230257 by tpartner
Replied by tpartner on topic Multiple dropdown options embedded in a list (radio)
I'm not surprised it doesn't work, the request was for a list-radio type question.

Can you attach a small sample survey (.lss file) containing only the relevant questions and your code?
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.

  • polbarbe95
  • polbarbe95's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
2 years 7 months ago #230258 by polbarbe95
Replied by polbarbe95 on topic Multiple dropdown options embedded in a list (radio)
Yes, it worked perfectly with the radio list. But I was trying to figure out how to implement it in a multiple choice in my own (did not work as planned). Many thanks again tpartner. 

Please find attached an small sample

Best, 
Attachments:

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 7 months ago #230261 by tpartner
Replied by tpartner on topic Multiple dropdown options embedded in a list (radio)
This should work for check-boxes. It also modifies the listeners to un-check the box if a dropdown is cleared.

Code:
<script type="text/javascript" data-author="Tony Partner">  
 
  $(document).on('ready pjax:scriptcomplete',function(){
    // The text for the "Please choose" option
    var chooseText = {
      'en': 'Please choose...',
      'de': 'Bitte auswählen...',
      'fr': ' Veuillez choisir ...'
    }
    // Identify the questions
    var qID = '{QID}';
    var thisQuestion = $('#question'+qID);
    var nextQuestion = $(thisQuestion).nextAll('.list-dropdown:eq(0)');
    var nextQuestion2 = $(thisQuestion).nextAll('.list-dropdown:eq(1)');
 
    var lang = $('html').attr('lang');
 
    // Hide the next questions
    nextQuestion.hide();
    nextQuestion2.hide();
 
    // Move the dropdowns
    $('.answer-item.checkbox-item:eq(0)', thisQuestion).addClass('with-dropdown').append($('.answer-item', nextQuestion));
    $('.answer-item.checkbox-item:eq(1)', thisQuestion).addClass('with-dropdown').append($('.answer-item', nextQuestion2));
 
    // Cleanup styles
    $('.answer-item.checkbox-item .answer-item', thisQuestion).css({
      'display': 'inline-block',
      'margin-left': '1em',
      'padding': '0'
    });
 
    // Initial states
    var iChooseText = chooseText['en'];
    if(lang in chooseText) {
      iChooseText = chooseText[lang];
    }
    $.each($('select.form-control', thisQuestion), function(i) {
      if($('option[value=""]', this).length == 0) {
        $(this).prepend('<option value="">'+iChooseText+'</option>');
      }
    });
 
    // Listener on the checkboxes
    $('.answer-item.checkbox-item :checkbox', thisQuestion).on('change', function(e) {
      $.each($('.answer-item.with-dropdown', thisQuestion), function(i) {
        if($(':checkbox:checked', this).length == 0) {
          $('.answer-item input[type="hidden"]', this).val('');
          $('.answer-item select', this).val('').trigger('change');
        }
      });
    });  
 
    // Listener on the dropdowns
    $('.answer-item.with-dropdown select', thisQuestion).on('change', function(e) {
      var thisItem = $(this).closest('.checkbox-item');
      if($(this).val() != '') {
        $('input[type="hidden"]:first', thisItem).val('Y');
        $(':checkbox', thisItem).prop('checked', true).trigger('change');
      }
      else {
        $('input[type="hidden"]:first', thisItem).val('');
        $(':checkbox', thisItem).prop('checked', false).trigger('change');
      }
    });    
  });
</script>

Sample survey attached: 

File Attachment:

File Name: limesurvey...2384.lss
File Size:112 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: polbarbe95

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