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

Hide dropdown choices using Javascript

  • January 17, 2022
  • 2 replies
  • 377 views
M

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.

Abhishek_U

2 replies

Rudi
QPN Level 3 ●●●
Forum|alt.badge.img+16
  • Rudi
  • QPN Level 3 ●●●
  • January 18, 2022

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

S
Forum|alt.badge.img
  • SceneHPE
  • September 14, 2022

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()
}

}

});

Terms & ConditionsAccessibility statement