Populating dropdown menu using JS loop | XM Community
Skip to main content

I was wondering if it possible to populate a dropdown list using Qualtrics API. For my questions I want survey takers to select a numbers from $0.00 to $10.00 in increments of 25 cents ($0.00, $0.25, $0.50, $0.75, ... $10.00), and I want their choice to be coded as the respective number (0, 25, 50, 75, ... 1000).
Is is possible to populate the dropdown list using JS?

For reference I've seen similar problems here:
https://www.qualtrics.com/community/discussion/4715/adding-answer-choices-to-multi-select-box-using-javascriptand I've seen the

setChoiceAnswerValue
in the API documentation but I am still not sure how to handle this.

For a multiple choice question (e.g., a drop-down) Qualtrics only records choices it knows about. You can't use JS to add choices on the fly.
What you could do is use a text entry question, hide the text entry box, and use JS to create a select (i.e., drop-down) on the fly. Then you could have JS copy the selected value into the hidden text entry field.


TomG thank you so much! I have this mostly solved. Last question: how do I copy the selected value into the hidden text entry field?
JS:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery(".InputText").hide()


// inspired by https://stackoverflow.com/questions/32925880/using-javascript-to-loop-through-drop-down-html-array
var sex = [];
var N = 1000;


for (var i = 0; i <= N; i = i+25) {
x = i / 100
x = "$" + x.toFixed(2)
   sex.push(x);
}


/* var sex = ="male", "female", "unknown"];*/


for (i = 0; i < sex.length; i++) {
  var opt = document.createElement("option");
  document.getElementById("m").innerHTML += '';
}


});
Question text html:


 
   
   
     
     
   
 
Demographics
Willingness to hire:
       
     



https://www.qualtrics.com/community/discussion/comment/30476#Comment_30476First, remove the form from your html. The Qualtrics page is already a form.
To copy the select value to the input field, you can use the addOnPageSubmit() function:
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
jQuery("#"+questionId+" .InputText").val(jQuery("#m").val());
});


Leave a Reply