Drop Down Box Based on Previous Numeric Question

Question

I am programming a survey with the following two questions:
Any ideas on how to program the responses to Q22?
Thanks!

20.How many transaction sides did  you generate in the last 12 months? [Numeric Response Box]
22.    How many of your transaction sides were a result of ________? (Drop down box. Use values from Q20 and include “0.”)

Comments

Is Q22 on the same page as Q20?

What is the maximum value respondents can put into Q20?

---

Q22 is on a separate page.
(Would it be easier if on the same page?)

There is no max value...

---

Same or different pages could both be done, but they would involve different code.

Dropdown select questions in Lighthouse Studio use lists, which don't support the infinite number of items they would need to work with a Q20 with no maximum value.  What we would instead need to do is actually set up Q22 as a numeric question (which we can give some 99999 max like Q20), then use JavaScript to replace the normal numeric input with this special dropdown.

---

We can do that.

Any tips on the exact code that I could use to replace that with the dropdown?

Answer 1

Try adding this script to Q22's footer:

<style>
#[% QuestionName() %] {
    display: none;
}
</style>

<script>
$(document).ready(function(){
    // Parameters
    var q20 = [% Q20 %];
    
    // Run
    var resp = SSI_GetValue('[% QuestionName() %]');
    var select = $('<select id="[% QuestionName() %]_select"></select>');
    for (var i = 0; i <= q20; i++) {
        var option = '<option value="' + i + '"';
        if (i == resp) {
            option += ' selected';
        }
        option += '>' + i + '</option>';
        $(select).append($(option));
    }
    $('#[% QuestionName() %]').after($(select));
    
    $(select).change(function(){
        $('#[% QuestionName() %]').val($(this).val());
    });
})
</script>

If Q20 is renamed, line 10 must be updated.

Comments

Zachary- you're a lifesaver!