Populating dropdown menu using JS loop | XM Community
Solved

Populating dropdown menu using JS loop

  • 20 September 2020
  • 3 replies
  • 422 views
W
Userlevel 2
Badge

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.

icon

Best answer by TomG 22 September 2020, 17:27

View original

3 replies

TomG
Rank
Userlevel 7
Badge +27

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.

W
Userlevel 2
Badge

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:
       
     


TomG
Rank
Userlevel 7
Badge +27

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


Terms & Conditions