Select2 Text Entry Form Multi-Select Dropdown | XM Community
Skip to main content
Question

Select2 Text Entry Form Multi-Select Dropdown

  • February 14, 2019
  • 2 replies
  • 1206 views
dobra021
Level 4 ●●●●
Forum|alt.badge.img+37
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!
Abhishek_U

2 replies

Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+34
  • Shashi
  • Level 8 ●●●●●●●●
  • April 21, 2023

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

rondev
Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • May 2, 2023

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
});

 

Terms & ConditionsAccessibility statement