Select2 with MultiSelect Box Displaying Problems | XM Community
Skip to main content

Hello,
I'm using the select2 script and I'm having a bug come up.
I have a list of schools in my survey that I want my users to select from. When I use it in a survey (please feel free to use this preview link to see for yourself), the box is displaying in all my following questions. NOTE: This is happening in the real survey as well.
Does anyone happen to know if this is a Qualtrics bug? Do anyone have any solutions?

Preview - Online Survey Software | Qualtrics Survey Solutions


https://norc.az1.qualtrics.com/jfe/preview/SV_7O0bB43qDIlxHjU?Q_CHL=preview&Q_SurveyVersionID=current
Qualtrics makes sophisticated research simple and empowers users to capture customer, product, brand & employee experience insights in one place.

This is the image that comes up in the next page of my survey. It should simply be the next question.
image.png

I think it works, but it is super slow. I've used select2 with Qualtrics many times and never had a performance issue. Post your JS.

In the question itself, I have:
Qualtrics.SurveyEngine.addOnReady(function()
{
        /*Place your JavaScript here to run when the page is fully displayed*/
        jQuery("#"+this.questionId).find('select:first').select2();
});
In the header I have the following HTML:
https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />">https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js">

Hey Tom,
Do you have any thoughts on this?
Thanks,
Mark

malush1412 ,
I just took another look at it. I think it is slow because you have 6,219 schools in the list. To speed it up you need to store the schools in an external database and use the select2 ajax functionality to populate the list of schools in smaller chunks.

Any idea why the school drop down is showing up on the next questions? Seems like a bug.

I think it is related to the list length and performance issue. Select2 creates a temporary list outside the virtual JFE page and it isn't able to destroy the list fast enough before Qualtrics moves to the next page.

Got it! Thanks so much for all the feedback.

Ah - so it seems as though the list is disappearing one the follow up questions, but only once you click into the list again.
Wonder if there's a workaround to stop that bug from showing up?

You need to focus on the performance issue because even without the bug the usability is awful. ajax is the solution.

I'm loading the file up - but even as I test this with 4 options (A, B, C, D) the box is displaying in the following questions.

Hi Tom,
This issue still happens even when I use a list with only 4 options (see image below).
Here's a preview link: https://norc.az1.qualtrics.com/jfe/preview/SV_7O0bB43qDIlxHjU?Q_CHL=preview&Q_SurveyVersionID=current
image.png

https://community.qualtrics.com/XMcommunity/discussion/15179/select2-with-multiselect-box-displaying-problemsHello,
I am having this same issue with two of my questions. Were you able to solve it?

Best,

Ana

https://community.qualtrics.com/XMcommunity/discussion/comment/44590#Comment_44590This issue still occurs (or occurs for me anyway). Has anybody found a way to stop the dropdown from displaying on the next page (where there's no dropdown question)? Thanks in advance!
Dan

https://community.qualtrics.com/XMcommunity/discussion/comment/54707#Comment_54707Try using the last non-rc version - 4.0.13.

Thanks for the tip, Tom. That seems to have fixed it! Thanks so much for the help!
Old header in Qualtrics: https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> ">https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js">
New header: https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> ">https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js">

Leave a Reply


Terms & Conditions