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?
Page 1 / 1
@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
});
});
```
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
});
});
```
Thanks, @TomG! Works like a charm.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.