Select2 Implementation | XM Community
Skip to main content
Solved

Select2 Implementation


danpenny
Forum|alt.badge.img+2
Hi

Could someone give me some quick help with something pretty basic - I want to implement Select2 on a Qualtrics survey, so that respondents can multi-select from a drop-down, but I'm not quite sure how to set it up.

I've added
link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /
script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js" /script

to my survey header - is that correct?

And then in my multi-select question I have this added as JS:

Qualtrics.SurveyEngine.addOnReady(function() {
$('.js-example-basic-multiple').select2();
});

But that's not doing much other than showing the answer choices in a box, so I must be missing a step.

Do I need to add the css script too somehow and somewhere? What is this and how do I do it?

Best answer by TomG

> @danpenny said:
> Thanks v much TomG!
>
> Ok, I've added that JS, replacing this.questionId with Q3. But the question still operates like a normal drop-down, only allowing me to select one answer. Any other suggestions on what I may be missing? I really appreciate this.

Do NOT replace the variable this.questionId, Q3 is not a valid QID. Use the script as I posted it (unless you need to add select2 options). Also, make sure your question is a Multi Select Box:
!
View original

danpenny
Forum|alt.badge.img+2
Sorry, header didn't appear. I've added the below so far:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • March 26, 2019
@danpenny,

Your question's JS should be something like this:
```
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.questionId+" select").select2();
});
```

danpenny
Forum|alt.badge.img+2
Thanks v much TomG!

Ok, I've added that JS, replacing this.questionId with Q3. But the question still operates like a normal drop-down, only allowing me to select one answer. Any other suggestions on what I may be missing? I really appreciate this.

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • March 26, 2019
> @danpenny said:
> Thanks v much TomG!
>
> Ok, I've added that JS, replacing this.questionId with Q3. But the question still operates like a normal drop-down, only allowing me to select one answer. Any other suggestions on what I may be missing? I really appreciate this.

Do NOT replace the variable this.questionId, Q3 is not a valid QID. Use the script as I posted it (unless you need to add select2 options). Also, make sure your question is a Multi Select Box:
!

danpenny
Forum|alt.badge.img+2
Ah - ok, sorry. That now works perfectly - many thanks Tom!

MattiasM
Level 5 ●●●●●
Forum|alt.badge.img+62
  • Level 5 ●●●●●
  • June 7, 2023

Good morning from a sunny Sweden!
Again love how a 4 year old community post can solve my hurdles today. 

Love it and thanks for the knowledge sharing. This was the level of hand holding I needed to get it fixed :) 

 

All the best

-Mattias

 


MattiasM
Level 5 ●●●●●
Forum|alt.badge.img+62
  • Level 5 ●●●●●
  • June 13, 2023

Good morning from a sunny Sweden!

When I implement this and go to the next page of the survey, the boxes from the select2 questions are all stacked up in the top left corner of the screen like this: 

Is there any way to avoid this @TomG ?

 

Thanks in advance

-Mattias


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • June 13, 2023

@MattiasM - What code are you using to load select2 in your header or footer?


MattiasM
Level 5 ●●●●●
Forum|alt.badge.img+62
  • Level 5 ●●●●●
  • July 4, 2023
TomG wrote:

@MattiasM - What code are you using to load select2 in your header or footer?

Good morning from a rainy Lund and sorry @TomG that I have not reponded earlier. I did not see any notification come through. 

 

I am using this in the header: 
 

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

 

All the best

-Mattias

 


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • July 4, 2023

@MattiasM,

Use:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css">
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

 


MattiasM
Level 5 ●●●●●
Forum|alt.badge.img+62
  • Level 5 ●●●●●
  • July 4, 2023
TomG wrote:

@MattiasM,

Use:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css">
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

 

Yeah that solved it. Much nicer looking :) 

Thanks so much! 

 

All the best

-Mattias


Leave a Reply