Solved
Formatting multi-selects in Select2 code
+2Hi - I have a multi-select question that uses select2: https://select2.org/placeholders
But I'm having some trouble doing 3 things:
1) Placeholder. I want to show a default message in the dropdown. I've added
`$('select').select2({
placeholder: {
id: '-1', // the value of the option
text: 'Select an option'
}
});`
into the JS for the question but that's not working.
2) Option groups. I want to have some answer options appearing under multiple bolded category heading, but does optgroup only work in html? How do I add it in JS to a Qualtrics question?
3) Font. By default, the drop down appears in a different font to the rest of the survey text. How do I change this?
Am I better off just learning JS...? 😀
thanks
Dan
Best answer by TomG
@danpenny,
If you expect to use JS (e.g. select2) in your surveys, then you should learn JS.
1. Placeholder:
```
jqObj.select2({ placeholder: "Select an option" });
```
2. Option groups: put your question in Multiple Answer mode, right click choices and assign to groups. After you have your groups set up, switch question to Multi Select Box.
3. Font: Add a style for .select2Dropdown in your Look & Feel CSS.
+27@danpenny,
If you expect to use JS (e.g. select2) in your surveys, then you should learn JS.
1. Placeholder:
```
jqObj.select2({ placeholder: "Select an option" });
```
2. Option groups: put your question in Multiple Answer mode, right click choices and assign to groups. After you have your groups set up, switch question to Multi Select Box.
3. Font: Add a style for .select2Dropdown in your Look & Feel CSS.
+2Thanks very much. Seeing how powerful this is, I should.
For now:
1) Adding this to the JS for the question doesn't seem to do anything - not sure why, but do you have any ideas?
2) Done - thank you.
3) I'll read more around this, should be possible with a bit more understanding.
Thanks again.
Dan
+27> @danpenny said:
> 1) Adding this to the JS for the question doesn't seem to do anything - not sure why, but do you have any ideas?
No without seeing the script. Post it in fences (3 back ticks):
\\`\\`\\`
code goes here
\\`\\`\\`
+2Hi - here it is:
```
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.questionId+" select").select2();
});
jqObj.select2({ placeholder: "Select an option" });
```
A more serious issue that I've just seen is that the list of items does not show properly. Some of the items repeat many times in the dropdown, even though they only appear once in the answer choice list in Qualtrics. See my preview link, "Which funders do..." question.
https://springernature.eu.qualtrics.com/jfe/preview/SV_bqklq3XL7VlF4Y5?Q_SurveyVersionID=current&Q_CHL=preview
Scrolling down, you can see "Science & Technology Facilities Council" appearing many times, even though it only appears once in the answer choices list.... very odd.
+27@danpenny,
Your JS it wrong, it should be:
```
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.questionId+" select").select2({ placeholder:"Select an option" });
});
```
I'm not sure what is causing the duplicates. I'm guessing it has something to do with the optgroups.
+27@danpenny,
On the duplicates, it seems select2 doesn't like mixing optgroups with options outside optgroups. A fix is to put all the options that are not in a group in a group together, then hide the group name.
+2Fantastic - thanks again Tom. All now shipshape. Really appreciate your rapid help.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.