Hide an option of Multiple Choice Question | XM Community
Solved

Hide an option of Multiple Choice Question


Hi,
I'm new here. I've seen that people use jQuery("#"+this.questionId).hide() to call and hide a question but how can i hide an option of the question?
Thanks in advance.
icon

Best answer by TomG 8 January 2021, 19:50

View original

21 replies

Userlevel 7
Badge +22
If there is a specific condition for which the option need to be hidden then use choice display logic

i can’t use display Logic because this question is conditioned by the answer of the previous question and both are in the same view. I tried to include the display logic but the option was not available.

Userlevel 4
Badge +16
Hi Jorge,
if I understand your requirement correctly you show two questions on the same page. Once the respondents select an answer in the first question some answer options in the second question should be hidden?
I see one major "problem" in this setup: The respondent will always see all answer options when the page is loading. You might consider using custom validation here to prevent the "wrong" answer combination.
Best regards, Rudi
Userlevel 7
Badge +27
> @JorgePs91 said:
> Hi,
> I'm new here. I've seen that people use jQuery("#"+this.questionId).hide() to call and hide a question but how can i hide an option of the question?
> Thanks in advance.

It depends on the format of the question and the criteria for hiding it. An example of hiding the choice where choiceid=1 in a vertical MC:
```
jQuery("#"+this.questionId+" input[choiceid=1]").closest("li").hide();
```
Hi @TomG
In my case i'm using columns in MC, it seems like a table. How can i call the choice in row 1 and column 3?
Thanks in advance
Userlevel 7
Badge +27
> @JorgePs91 said:
> Hi @TomG
> In my case i'm using columns in MC, it seems like a table. How can i call the choice in row 1 and column 3?
> Thanks in advance

I can't answer without knowing more and seeing the question. My advice is to use the inspect feature of your browser to figure it out.

https://www.qualtrics.com/community/discussion/comment/23503#Comment_23503Hello Tom,
Can this code be adapted to hide an option of the question, but using the naming of the option instead of the id?
For example: if the multiple choice question has several names, is it possible to write a code that hides the option "John"?
Best regards,
Francisco.

Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/33199#Comment_33199Yes, it is possible to write code to do that.

https://www.qualtrics.com/community/discussion/comment/33200#Comment_33200Thank you for your answer, I was trying to do it through:
jQuery("#"+this.questionId+" input[Choice_____=${e://Field/Name}]").closest("li").hide()
but I just don't know how to find what I should write instead of "ChoiceID", in order to get the question to be hidden based on the name...
I also tried to find the choiceID of the name, and then apply the code you wrote above, but I can't get it to work...
var a = getChoicesFromVariableName("${e://Field/Name}");
var id=a[0];
jQuery("#"+this.questionId+" input[choiceid=" + id + "]").closest("li").hide();
Do you have any suggestions you're willing to share, please?

Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/33202#Comment_33202You can't do it directly with a selector. You'll need to loop through the choices and examine the label text.

https://www.qualtrics.com/community/discussion/comment/33204#Comment_33204I understand, so basically I would need to do something like:
var qid = this.questionId;
var choice_contents = Qualtrics.SurveyEngine.QuestionInfo[qid].Choices;
var i;
for (i = 0; i < choice_contents.length; i++) {
if (choice_contents[i] == "${e://Field/Name}"){
var a = i+1;
 jQuery("#"+this.questionId+" input[choiceid=" + a + "]").closest("li").hide();
}
}
I tried this without success... unfortunately i'm completely unfamiliar with javascript syntax, could you give me any feedback please?

Userlevel 7
Badge +27

In your code I think choice_contents[i] is an object, not a text field. Also, there is no guarantee that the choiceid is the same as the loop number + 1.
I would take a different approach (assumes single answer, vertical MC - not tested):
jQuery("#"+this.questionId+" label.SingleAnswer").each(function() {
var label = jQuery(this);
if(label.text() == "${e://Field/Name}") label.closest("li").hide();
});

https://www.qualtrics.com/community/discussion/comment/33209#Comment_33209Hello Tom,
I just tried it and it worked perfectly! Thank you very much for your help and patience!
Best regards,
Francisco Leandro.

Hello Tom,
I was wondering if you could help me. I am getting an error when I try to use the code - it is an unexpected end of input error. I am pasting the code below. I have a multiple choice drop down list where I would like to hide one of the choices that was already selected in a previous question. I don't want the user to select the same choice in both questions. I am not familiar at all with JavaScript, so I am hoping you could help me.

Qualtrics.SurveyEngine.addOnReady(function()
{
               /*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" label.SingleAnswer").each(function() {
   var label = jQuery(this);
   if(label.text() == "${q://QID9/ChoiceGroup/SelectedChoices}") label.closest("li").hide();
             
});      

Userlevel 7
Badge +27

I think it is just a syntax error. Try:
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.questionId+" label.SingleAnswer").each(function() {
    var label = jQuery(this);
    if(label.text() == "${q://QID9/ChoiceGroup/SelectedChoices}") label.closest("li").hide();
});             
});    

That cleared the error. However, it is not doing what I expected. What I am trying to do is hide from the dropdown the value selected in question 9. Both questions are country lists and I would like to ensure that the user does not select the same country twice. I thought that the easiest way would be to hide the choice already selected. Do you have any suggestions how I could do this.
Thank you for the help.

Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/35950#Comment_35950As I said above, the code is for a single answer, vertical MC question. A select (dropdown) is completely different. Also, you can't hide select options in all browsers; the best you can do is disable them.

Userlevel 1
Badge +1

https://community.qualtrics.com/XMcommunity/discussion/comment/33209#Comment_33209@TomG How would this be different if we assumed a dropdown list (single answer)?

Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/48493#Comment_48493The equivalent for a drop down would be something like (untested):
jQuery("#"+this.questionId+" select option").each(function() {
var option = jQuery(this);
if(option.text() == "${e://Field/Name}") option.prop("disabled",true).hide();
});

Userlevel 1
Badge +1

https://community.qualtrics.com/XMcommunity/discussion/comment/48502#Comment_48502TomG Hmm, I tried this and it is disabling each option but not hiding them for some reason. Very weird. Do you know why this would be?

Userlevel 7
Badge +27

Yes, as I mentioned somewhere up above, not all browsers support hiding select options. Your browser must not.

Leave a Reply