How to make a text field dependent on a drop down list selection in side-by-side question | Experience Community
Skip to main content
Solved

How to make a text field dependent on a drop down list selection in side-by-side question

  • August 20, 2023
  • 1 reply
  • 555 views
C
Level 1 ●
Forum|alt.badge.img+5

I have a side-by-side table and one of the columns is a drop down list.  If ‘Other’ is selected in the list then I would like the text box in the next column to show.  I have multiple rows so would need to work on a per-row basis.  Is this possible? I’ve attached an example

Best answer by Deepak

 

@cturtle 

Assuming your dropdown values are in 2nd column and open end column is 3rd, option value is 5th.

You can add below JS in Question to achieve the hide or show feature.

Qualtrics.SurveyEngine.addOnReady(function() {
var qid = this.questionId;
var n = jQuery('#' + qid).find('select').length;

// Disable all input elements initially
jQuery('.c10 input').hide();

jQuery('#' + qid).find('.c7').change(function() {
for (let i = 0; i < n; i++) {
var index = jQuery('select.MatrixDL').eq(i).find('option:selected').index();
if (index == 5) {
jQuery('.c10 input').eq(i).show();
} else {
jQuery('.c10 input').eq(i).hide();
}
}
});
});

Hope it helps!

1 Attachments

    1 reply

    Deepak
    QPN Level 8 ●●●●●●●●
    Forum|alt.badge.img+46
    • Deepak
    • Answer
    • August 20, 2023

     

    @cturtle 

    Assuming your dropdown values are in 2nd column and open end column is 3rd, option value is 5th.

    You can add below JS in Question to achieve the hide or show feature.

    Qualtrics.SurveyEngine.addOnReady(function() {
    var qid = this.questionId;
    var n = jQuery('#' + qid).find('select').length;

    // Disable all input elements initially
    jQuery('.c10 input').hide();

    jQuery('#' + qid).find('.c7').change(function() {
    for (let i = 0; i < n; i++) {
    var index = jQuery('select.MatrixDL').eq(i).find('option:selected').index();
    if (index == 5) {
    jQuery('.c10 input').eq(i).show();
    } else {
    jQuery('.c10 input').eq(i).hide();
    }
    }
    });
    });

    Hope it helps!

    Terms & ConditionsAccessibility statement