Can I do a constructed List on the same page as the independent question

Question

I have two questions.

Question1: On which train lines would you like to see increased security at the stations.
     Red
    Green
    Blue
    Orange

Question2: At which stations do you want to see increased security?


I created a list containing all stations for all lines. I then want Question2 to show only those lines associated with what was selected in Quesiton1.  For example if the select 'Red' (Question1 == 1) then I want to display:
  Station1
  Station2
  Station3

If they select 'Orange' (Question1 == 4) then I want to display:
  Station1
  Station11
  Station12

That is easy enough to do using Perl, but that only works if the questions are on different pages. Can I create this dynamic list if Question1 and Question2 are on the same page?

Comments

A constructed list is not up to this task with them being on the same page, unfortunately - we need a frontend solution instead.  Are these both checkbox-type select questions?

If they had been dropdowns, I'd point you to "Drilldown Dropdowns:" https://sawtoothsoftware.com/resources/question-library/drilldown-dropdowns

The more generic "Branching" could handle this, but it would require that multiple versions of Q2 be created: https://sawtoothsoftware.com/resources/question-library/branching

Once you have confirmed that both questions are multiselects, I should be able to write some JS that will hide certain checkboxes from Q2.  How do you imagine Q2 looking when nothing has been chosen in Q1?

---

Hey Zach,
Both questions are checkbox-type select questions (actually, multiple-select drop downs, but checkbox yes).

I would just say we can keep Q2 hidden until the select something in Q1.

Answer 1

This is "Custom Dropdown," correct?  Try adding this script at the end of the second question's footer:

<script>
$(document).ready(runConstructedListBehavior);
$(document).on('lighthouseCheckboxChanged', runConstructedListBehavior);

function runConstructedListBehavior() {
    // Params
    var firstQuestion = 'CustomDropdown1';
    var secondQuestion = 'CustomDropdown2';
    var map = {
        1: [1, 2, 3],
        2: [4, 5, 6],
        3: [7, 8, 9]
    };
    
    // Run
    var anyChecked = false;
    $('#' + secondQuestion + '_div .clickable').addClass('hiddenClickable');
    $('input[name="hid_list_' + firstQuestion + '"]').val().split(',').forEach(function(item){
        if (SSI_GetValue(firstQuestion + '_' + item)) {
            var otherItems = map[item] || [];
            otherItems.forEach(function(otherItem){
                $('#' + secondQuestion + '_' + otherItem).closest('.clickable').removeClass('hiddenClickable');
            });
            anyChecked = true;
        }
    });
    $('#' + secondQuestion + '_div').toggle(anyChecked);
}
</script>

In the parameters section, you can define the names of your two questions and a JavaScript object that controls the relationship between the two questions.  Does that work for you?