Select2 Text Entry Form Multi-Select Dropdown | XM Community
Skip to main content
I am using javascript to transform a text entry form field into a dropdown list and I need to make it multi-select. I know I will need to use Select2 and I have loaded the following into the header:

```

<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>

```

I've read through a lot of the Select2 material, but haven't quite figured it out yet. How would I adapt this code to make the last form field multi-select.

```

Qualtrics.SurveyEngine.addOnReady(function()

{

/*Creates dropdown lists for form text entry boxes*/

var that=this.questionId;

var element="<select id='s1'><option ></option><option value=OPTION1</option><option value='2'>OPTION2</option><option value='3'>OPTION3<option value='4'>OPTION4<option value='5'>OPTION5</select>";

jQuery(element).insertAfter("#"+that+" .InputText:eq(3)");

var element="<select id='s2'><option ></option><option value='1'>OPT1</option><option value='2'>OPT2</option><option value='3'>OPT3<option value='4'>OPT4<option value='5'>OPT5<option value='6'>OPT6<option value='7'>OPT7<option value='8'>OPT8<option value='9'>OPT9<option value='10'>OPT10</select>";

jQuery(element).insertAfter("#"+that+" .InputText:eq(4)");

jQuery("#"+that+" .InputText:eq(3)").hide();

jQuery("#"+that+" .InputText:eq(4)").hide();



jQuery("#"+that+" .InputText:eq(3)").val(jQuery("#s1 option:selected").text());

jQuery("#"+that+" .InputText:eq(4)").val(jQuery("#s2 option:selected").text());



jQuery("#s1").on('change',function(){

jQuery("#"+that+" .InputText:eq(3)").val(jQuery("#s1 option:selected").text());

});



jQuery("#s2").on('change',function(){

jQuery("#"+that+" .InputText:eq(4)").val(jQuery("#s2 option:selected").text());

});



});

```

Thanks!

For this, we need to make the question type as select box and add ‘multiple:true’ in select2 option.

Hi, this is working on my end to turn the 4th and 5th form fields into Select2 multiselect dropdowns . First add the below to the survey's Header:

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

Then, create a Form Field question with 5 fields and add the below to the OnReady section of the question's JavaScript:

var qid=this.questionId;

var element1="<select id='s1'><option ></option></select>";

jQuery(element1).insertAfter("#"+qid+" .InputText:eq(3)");

var element2="<select id='s2'><option ></option></select>";

jQuery(element2).insertAfter("#"+qid+" .InputText:eq(4)");

jQuery("#"+qid+" .InputText:eq(3)").hide();
jQuery("#"+qid+" .InputText:eq(4)").hide();

jQuery("#"+qid+" .InputText:eq(3)").val(jQuery("#s1 option:selected").text());
jQuery("#"+qid+" .InputText:eq(4)").val(jQuery("#s2 option:selected").text());

jQuery("#s1").on('change',function(){
jQuery("#"+qid+" .InputText:eq(3)").val(jQuery("#s1 option:selected").text());
});

jQuery("#s2").on('change',function(){
jQuery("#"+qid+" .InputText:eq(4)").val(jQuery("#s2 option:selected").text());
});

var options1 = [
{id: "OPTION1",text: "OPTION1"},
{id: "OPTION2",text: "OPTION2"},
{id: "OPTION3",text: "OPTION3"},
{id: "OPTION4",text: "OPTION4"},
{id: "OPTION5",text: "OPTION5"}
];

jQuery("#s1").select2({
placeholder: 'Select an option',
data: options1,
width: '200px',
multiple: true
});


var options2 = [
{id: "OPT1",text: "OPT1"},
{id: "OPT2",text: "OPT2"},
{id: "OPT3",text: "OPT3"},
{id: "OPT4",text: "OPT4"},
{id: "OPT5",text: "OPT5"}
];

jQuery("#s2").select2({
placeholder: 'Select an option',
data: options2,
width: '200px',
multiple: true
});

 

Leave a Reply


Terms & Conditions