Hide dropdown choices using Javascript | XM Community
Skip to main content

I need to implement display logic (not using the Qualtrics GUI) using Javascript in a "Multiple Choice" question in the "Dropdown" format, with that logic selectively hiding a subset of potential choices based on the value of an Embedded variable.
Survey flow:

  • Question 1 (name=QR~QID1): display all numbers 1 through 5; choose a number.

  • Create embedded variable (name=emd_threshold) equaling the choice from Question 1

  • Question 2 (name=QR~QID2): display only the numbers 1 through 5 that are less than or equal to the choice from Question 1; choose a number.

Example: if "3" was chosen in Question 1, then only "1, 2, 3" would be shown in Question 2.
Below is code that successfully works when the second question is a "List" format, but I cannot determine how to change it to accommodate a "Dropdown" format.
Qualtrics.SurveyEngine.addOnload(function()
{
var threshold = parseInt("${e://Field/embd_threshold}");

for (let i = 1; i <= 5; i++) {
var choiceoption = "QR~QID2~" + i

if (i > threshold) {
$(choiceoption).up().hide();
}
}

});
Note: I need to Use Javascript here because the real application of this problem involves choice options in the hundreds, for which manual use of Qualtrics' GUI to set display logic for every possible choice and condition is impractical.

Hi,

this should work:

  1. get the value of first question

  2. create an array with the available choices from the current question

  3. loop through the available choices and hide the answers which are gt the selected Choice from the first question by using document.getElementById.

ideally Question 1 and Question 2 have the identical Answer Ids and Recodes I suggest to copy the first question
Qualtrics.SurveyEngine.addOnload(function()
{
let selectedChoicesRecodes = "${q://QID2/SelectedChoicesRecode}".split(',')
let availableChoices = this.getChoices()
let availableChoicesRecodes = new Array;
for(let i=0;i availableChoicesRecodes.push(Number(this.getChoiceRecodeValue(availableChoices[i])))
}
console.log(selectedChoicesRecodes)
console.log(availableChoicesRecodes)
for(let i=0;i if(Number(availableChoicesRecodes[i]) > Number(selectedChoicesRecodes)){
console.log("hide options =" + "QR~"+this.questionId + "~" + availableChoicesRecodes[i])
document.getElementById("QR~"+this.questionId + "~" + availableChoicesRecodes[i]).hide()
}
}
});

Best regards

Rudi

Hi Rude,
I have created Side by side question and getting rank in 3 columns each column have 5 choices so now i want to exclude rank 2 from rank 1 choices i have tried this but not working can u pls help me on this?
Qualtrics.SurveyEngine.addOnload(function()
{
let selectedChoicesRecodes = "${q://QR~QID2#1~1/SelectedChoicesRecode}".split(',')
let availableChoices = this.getChoices()
let availableChoicesRecodes = new Array;
for(let i=0;iavailableChoicesRecodes.push(Number(this.getChoiceRecodeValue(availableChoices[i])))
}
console.log(selectedChoicesRecodes)
console.log(availableChoicesRecodes)
for(let i=0;iif(Number(availableChoicesRecodes[i]) > Number(selectedChoicesRecodes)){
console.log("hide options =" + "QR~"+this.questionId + "~" + availableChoicesRecodes[i])
document.getElementById("QR~"+this.questionId + "~" + availableChoicesRecodes[i]).hide()
}

}

});

Leave a Reply


Terms & Conditions