Welcome to the LimeSurvey Community Forum

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

Category separator on array (numbers) with custom JS Dropdown list

  • mforster
  • mforster's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 10 months ago #154712 by mforster
Hello everyone,

I'm a beginner in JS scripting, i create a new Array (numbers) with Dropdrown list. I would like to put category separator on it. (See the picture in attachment)


Is it possible ?

Can I find a code to do it properly ?

Many Thanks for your help
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 10 months ago #154719 by tpartner
You can add something like this to the question text:
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){  
 
    // Add a class to the question
    $('#question{QID}').addClass('with-separator-options');
 
    // Loop through all dropdowns in this question
    $('#question{QID} .answer-item select').each(function(i) {
      // Insert a separator before the option with value 1
      $('option[value="1"]', this).before('<option value="" disabled>Separator 1</option>');
 
      // Insert a separator before the option with value 5
      $('option[value="5"]', this).before('<option value="" disabled>Separator 2</option>');
    });
  });
</script>

And then add something like this to the end of template.css:
Code:
.with-separator-options .answer-item option {
  padding: 0 15px;
}
 
.with-separator-options .answer-item option:disabled {
  padding: 0;
  font-weight: bold;
  opacity: 1;
  color: #000000;
}

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: mforster
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
6 years 10 months ago #154738 by LouisGac
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 10 months ago #154748 by tpartner
My understanding is that these are select elements, not Bootstrap dropdown menus.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
6 years 10 months ago #154749 by LouisGac
absolutely, I'm just pushing bootstrap solutions ;-)
The topic has been locked.
  • mforster
  • mforster's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 10 months ago #154844 by mforster
Thank you very much for your help !
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose