Select2 Dynamic Option Creation/tagging | XM Community
Solved

Select2 Dynamic Option Creation/tagging

  • 28 June 2019
  • 2 replies
  • 160 views
R
Badge +2
Hello,
I've installed the full version of select2 for a survey I have and would like to enable dynamic option creation/tagging to allow for participants to add their own choices. However, everything I've tried has not initialized this feature. According to the select2 website all I _have_ to add is `tags: true` with version 4.0.x. I've checked StackOverflow and the select2's forum for the intersection of Qualtrics and select2 and there isn't much there. What is there is from older versions of select2 or stuff that I've tried with no success.

The only hint I've found that might be restricting tag is that I have a select2 overlaying a text box, when some of the documentation states that I need to use a select box. However, this might be for older versions. Further, this seems odd since I've also seen documentation implying that using either a select box or a input text would allow for tagging.

Is there something with the intersection of Qualtrics, jQuery, and select2 that I need to be aware of to allow for new option creation?
icon

Best answer by TomG 1 July 2019, 22:16

View original

2 replies

TomG
Rank
Userlevel 7
Badge +27
@Ryan_W,

I don't know why tags don't work with a text input field. However, you can solve the issue by adding your own empty select in front of the text field and hiding the text field. Then add a change event to the new select to update the text field. Finally, attach select2 to the new select. For example:
```
Qualtrics.SurveyEngine.addOnload(function() {
var yearList = [
{id: "", text:""},
{id: "2020", text: "2020"},
{id: "2019", text: "2019"},
{id: "2018", text: "2018"},
{id: "2017", text: "2017" },
];
var year = jQuery("#"+this.questionId+" .InputText").eq(0);
year.before("<select id='yearSelect' autocomplete='off'></select>");
year.hide();
yearSelect = jQuery("#yearSelect");
yearSelect.change(function() {
year.val(this.value);
year.trigger('change');
});
yearSelect.select2({
data: yearList,
placeholder: "Year",
tags: true
});
});
```
R
Badge +2
Thanks, @TomG! Works like a charm.

Leave a Reply


Terms & Conditions