Adding Answer Choices to Multi Select Box using JavaScript

nschwitternschwitter Community Member Qubie ✭

Adding Answer Choices to Multi Select Box using JavaScript

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). "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!

Best Answer

  • ShashiShashi India Wizard ✭✭✭✭✭
    Accepted Answer

    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.


  • ShashiShashi IndiaCommunity Member Wizard ✭✭✭✭✭

    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.


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

  • nschwitternschwitter Community Member Qubie ✭

    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!

  • nschwitternschwitter Community Member Qubie ✭

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

  • nschwitternschwitter Community Member Qubie ✭
    edited May 21

    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(", "));

Sign In to Comment