Selecting descendants of a category when ancestor is clicked I have a question about combining Twig and jQuery in Craft. I have a couple of filters on a page that outputs some entries:
http://www.joycefdn.org/grants

My categories are organized like this:
Education and Economic Mobility
 - Educator Quality 
 - Innovation
 - Pathways 
Environment 
 - Climate Solutions
 - Great Lakes
Culture 
 - Arts Access and Participation
 - Arts Leadership and Workforce
 - Creativity and Cultural Production
 - Joyce Awards 
Democracy
 - Fair Elections
 - Media
Gun Violence Prevention and Justice Reform
 - Gun Violence Prevention
 - 21st Century Policing
 - Reducing Mass Incarceration
Special Opportunities
 - Communications
 - Cross-Programmatic Innovations
 - Digital Tools

with the top level being Programs and the second level being focus areas.  I would like to have it so that when a Program is selected then the Focus Area select menu gets populated with the categories that are children of that program.  I currently have this jQuery left over from another method I tried which does get the current Programs that are selected:

$(".grants-data form[name='grantSearch'] select[name='program']").change(function(){
    var selectedPrograms = $("form[name='grantSearch'] input[data-name='selectItemprogram'][value!='']:checked").map(function() {
    return this.value;
                }).get().join('|');
});


and I have this which appends all of the descendants of all categories to the focus area menu:

{% set catSlug = craft.categories.title('focusArea').first() %}
            {% set childFAs = craft.categories.descendantOf(catSlug) %} 
            $("select#focusArea").html('&lt;option value=""&gt;Focus Area&lt;/option&gt;');
            {% for fa in childFAs %}
            $("select#focusArea").append('&lt;option value="{{fa.title}}"&gt;{{fa.title}}&lt;/option&gt;');
            {% endfor %}
            {% if faSlug|length %}
                $("select#focusArea option[value='{{faSlugOrig}}']").attr('selected',true);
            {% endif %}
            &lt;/script&gt;


but I can't seem to connect these two so that only the descendants of the program that is clicked get populated.  I think I may be overthinking this or trying to combine two methods that just won't combine.  Any help would be greatly appreciated!

Thanks!!
Okay, please don't be afraid and give it a try. I'm using the angular way, it seems a little bit difficult but it's actually really easy once you get used to it and works perfectly as soon as you understand it a little bit. If you need changes I'll provide whatever you need.
Edit: here you can see a live example for it plunker or course without css but it is your html

Let's get into it.
For testing purposes I created this category structure in my backend and called the group filter.


First you need to include this library you can of course use the {% includeJsRessource %} as well

&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"&gt;&lt;/script&gt;


Then you create 2 javascript arrays one for the Culture, Democracy... I call them parents and one for their children that belong to them

// get all filters of the first level
{% set filters = craft.categories.group('filter').level(1).find() %}
&lt;script type="text/javascript"&gt;
    var children = [];
    var parents = [];
    {% for filter in filters %}
        parents.push({
            title: "{{ filter.title }}",
            id: "{{ filter.id }}"
        });
        // now fetch all children for them
        {% set children = craft.categories.group('filter').descendantOf(filter).level(2).find() %}
        {% for child in children %}
            children.push({
                title: "{{ child.title }}",
                id: "{{ child.id }}",
                parent: "{{ filter.id }}"
            });
        {% endfor %}
    {% endfor %}
&lt;/script&gt;


In the end you'll have 2 array that could look like

Now the funny part starts
include this javascript file. You can ask whatever you want I'll explain it. Even if the syntax and everything what's going on seems a little bit strange, but make sure this is loaded after the library from above

var  myApp = angular.module('myApp',[]).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

myApp.controller('filterController', ['$scope', function ($scope) {
    // all parents
    $scope.parents = parents;
    // all children
    $scope.children = children;

    // return if the parent is selected or not
    $scope.filterBySelectedParent = function (item) {
        return $scope.selectedParents.indexOf(item.parent) !== -1;
    };

    // an array with all selected parent ids
    $scope.selectedParents = [];

    // include an item to the array or slice it when the input it clicked
    $scope.addFilter = function(id){
        var index = $scope.selectedParents.indexOf(id);
        if(index === -1){
            $scope.selectedParents.push(id);
        }else{
            $scope.selectedParents.splice(index, 1);
        }
    }
}]);


And finally your new html

&lt;!-- this is your menu or your filter bar or whatever you want to call it --&gt;
&lt;!-- I inspected your html and tried to use that but you must include ng-app and ng-controller somewhere --&gt;
&lt;div ng-app="myApp" ng-controller="filterController"&gt;
    &lt;!-- your first ul... all your parents, the first filter in your page --&gt;
    &lt;ul&gt;
        &lt;li ng-repeat="filter in parents"&gt;
            &lt;label class=""&gt;
                &lt;input type="checkbox" ng-click="addFilter(filter.id);" value="{[{filter.id}]}"&gt;&lt;span&gt;{[{ filter.title }]}&lt;/span&gt;
            &lt;/label&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

    &lt;!-- all your children, the second filter in your page --&gt;
    &lt;ul&gt;
        &lt;li class="" ng-repeat="child in children | filter: filterBySelectedParent"&gt;
            &lt;label class="" &gt;
                &lt;input type="checkbox" data-name="selectItemfocusArea" value="{[{ child.id }]}"&gt;&lt;span&gt;{[{ child.title }]}&lt;/span&gt;
            &lt;/label&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

    &lt;!-- include the rest here --&gt;
&lt;/div&gt;


Explanation: so what actually happens is the following 


you create 2 arrays in javascript based on your backend inputs
angular renders your menu based on those two arrays but the second one has a filter. Only clicked items of the first array are shown
as soon as someone clicks on an filter it is included in an array $scope.selectedParents 
any change in this array is recognized automatically which results, that the html renders again => your other filters are shown.


Please tell me if I missunderstood you somehow.. based on my current state I can change nearly everything really easily in just a few clicks. For example if you would like to automatically select your children you would include ng-checked="filterBySelectedParent(child)" on your input and remove the | filter: filterBySelectedParent.. that's it