Hello!
I have a multi-select list of options. The client wants that when one of the options is clicked, to display a sub-list of options, as below. Is this possible?
Answer 1
Answer 2
Answer 3
Answer 4 [-> when selected, a secondary list of answers shows up within the same question, not as a separate question below with in-page display logic]
Answer 4.1
Answer 4.2
Answer 4.3
Answer 4.4
Thanks a lot!
Expand answer options in a multi-select question
I have function called mcSubChoices that is a lot more flexible. It supports any number of choices and subchoices without having to do any custom coding.
Hi there, if you still need, I recently tackled a post that I think might work here too. Try creating a Multiple Choice question that is set to Allow multiple answers and giving it 8 choices.
Then, add the below to the question's JavaScript in the OnReady section:
var qid = this.questionId;
var row5= jQuery("#"+this.questionId+" input[choiceid=5]").closest("li");
var row6 = jQuery("#"+this.questionId+" input[choiceid=6]").closest("li");
var row7= jQuery("#"+this.questionId+" input[choiceid=7]").closest("li");
var row8 = jQuery("#"+this.questionId+" input[choiceid=8]").closest("li");
row5.hide();
row6.hide();
row7.hide();
row8.hide();
this.questionclick = function(event, element) {
var selectedChoice = this.getSelectedChoices()
console.log(selectedChoice)
if (selectedChoice.includes("4")) {
row5.show();
row6.show();
row7.show();
row8.show();
}else{
row5.hide();
row6.hide();
row7.hide();
row8.hide();
jQuery("input[id='QR\\~"+qid+"\\~5']").prop('checked',false);
jQuery("input[id='QR\\~"+qid+"\\~6']").prop('checked',false);
jQuery("input[id='QR\\~"+qid+"\\~7']").prop('checked',false);
jQuery("input[id='QR\\~"+qid+"\\~8']").prop('checked',false);
}
}
TomG cool function! Definitely more flexible, and closer to what the poster was looking for.
I should have thought about Choice Groups. I'll just add to my post that assigning options 5,6,7,8 to a Choice Group and adding the below line to the JavaScript will add the indent to the sub-options.
jQuery("#"+this.questionId+" .ChoiceGroup").css({"display":"none"});
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.