How do I stop Select2 box from displaying on subsequent pages? | XM Community
Skip to main content

Hi everyone,
I have a question in my survey that uses Select2 to enable respondents to select all the countries their organisations work in. I have set it up this way to make the user experience better for my respondents so they do not have an overwhelming list of countries presented to them.
To do so I have put this in the 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.1.0-rc.0/dist/js/select2.min.js">

And used the following in the javascript of the question:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{

 jQuery("#"+this.questionId+" select").select2();


});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

And used the responses list from the "In which country do you reside?" question in the library.
On the relevant page it works well and looks like this:
image.png
However, when my respondents click through to the next question, the box remains on the screen like this:
image.pngAs far as I've been able to test it, this seems to only happen in the mobile view. Is there a way of fixing this so the container closes on the original page? Or does anyone have an alternative to Select2 that might work better for this purpose?
Thanks in advance!
Meg

Hi there, if you still need, I was able to get the select2 to work okay on my end by adding it to a Text Entry question and including the options within the question's JS. First, add the below to the survey's Header over in the Look & Feel. I was running into some issues changing dropdown selection with the 4.1.0 version but 3.5.2 seems to change selections alright:

 
Then in the onReady of the question's JS:
var countries =
    {
        id: '0',
        text: 'Country1'
    },
    {
        id: '1',
        text: 'Country2'
    },
    {
        id: '2',
        text: 'Country3'
    },
    {
        id: '3',
        text: 'Country4'
    },
    {
        id: '4',
        text: 'Country5'
    }
];


jQuery("#"+this.questionId+" .InputText").select2({
data: countries,
placeholder: 'Please select a country'
});


//Close virtual/mobile keyboard on input change//
jQuery("#"+this.questionId+" .InputText")
   .on('change', function(e) {
      jQuery('#NextButton').focus();
jQuery('#NextButton').blur();
   })
select2AutoComplete.png

Leave a Reply


Terms & Conditions