Adding Answer Choices to Multi Select Box using JavaScript | XM Community
Skip to main content
Hello!

In my survey, I ask respondents about a list of names and will use these names as answer choices in following questions. I'm currently trying to add additional answer choices to a multi-select box. I managed to have "Simba" show up as an additional choice in the select box by adding the following to the addOnReady:

```

var newOption = "Simba";

var option = document.createElement("option");

option.text = newOption;



jQuery("#"+this.questionId+" select").append(option);

```

However, if I select "Simba", this is not recorded by Qualtrics. I saw that the other option elements have additional attributes, so i tried adding those to my new option (the Question is QID7).

```

option.id= "QR~QID7~i00";

option.setAttribute("class", "Selection");

option.setAttribute("role", "option");

option.setAttribute("aria-selected", "false");

option.value = "QR~QID7~i00";

option.setAttribute("data-runtime-text", "Runtime Text test00");

```

The problem remains though. Also, the attribute "aria-selected" does not change when I select Simba, but it does change with the other, regular answer choices. I tried solving this by adding

```

if(jQuery(option).prop( "selected" ))

{

option.setAttribute("aria-selected", "true");

}

```

But again, this did not help.



Any help would be appreciated!
Hello @nschwitter ,



If the idea is you have text entry form question and you want the response of this question to be in the follow up drop down question, then you can also use carry forward choice option.



OR



With respect to above JS, you can apply select event and capture the selected option in an embedded data
Hi @Shashi,



thanks for your answer!

The first option does not work, because I ask respondets for a (comma-separated) list of names (the list can be as long as the respondents wish it to be). I will then split the list into the single options. There is no way to do this using carry forward choice option, is there?

I will have a try with your second suggestion, thanks!
> @Shashi said:

> Hello @nschwitter ,

>

> With respect to above JS, you can apply select event and capture the selected option in an embedded data



How would you go about this? I tried the following to apply a change event (select does not work in select boxes as far as I saw) and it did not work



```

var questionbox = document.getElementById(this.questionId);

var questionbox.addEventListener("change", alert("hello"));

```



Also, I tried to retrieve all the selected values by calling `jQuery('#QR~QID7').val();`. However, this only returns undefined. Do you have any idea why?
Paste the below code in the js(OnReady) of the DD question:



var that = this.questionId;

jQuery("#"+that+" select").on('change',function(){

Qualtrics.SurveyEngine.setEmbeddedData("ED_DD_Ans", jQuery("#"+that+" select").find("option:selected").text());

});



Make sure you have embedded data "ED_DD_Ans" declared/created in the survey flow before this question.
Ah, it works with .find!

Great, thank you so much!



For anyone in the future with a similar question, I adapted one line of the code like this, to have a comma-separated list:

` Qualtrics.SurveyEngine.setEmbeddedData("ED_DD_Ans", jQuery("#"+that+" select").find("option:selected").toArray().map(el => el.text).join(", "));`

Leave a Reply


Terms & Conditions