'How to create two selection boxes that filter each other

I am trying to filter two selection boxes by each other. I am really struggling just to have one box filter the selections of the other. The filtering is going to be done based on one array of a particular type of object. The basic format of the object is: {TestId: int, StudentId, int, InProgress, (0 or 1)}. Another important aspect is that there is supposed to be an element in both selection boxes that are supposed to be there all of the time.
Here is some code of what I'm working on and some very basic code that demonstrates the proof of concept.

$(function () {
        $('#Tests').change(function () {

          
            if ($("#Tests option:selected").val() > 0) {

                var vals = $('#person option').map(function () {
                    return this.value;

                }).get();
    //format of persons: [Object{TestId: *Id of test*, StudentId: *Id of student*, InProgress: *0 or 1*}, Object...}]
                var persons =  [{TestId: 1, StudentId: 1, InProgress:0}, {TestId: 2, StudentId: 1, InProgress:0}, {TestId: 3, StudentId: 1, InProgress:1}, {TestId: 4, StudentId: 2, InProgress:1}, {TestId: 5, StudentId: 2, InProgress:1}];
                m = persons.filter(m => m.TestId == $("#Tests option:selected").val()).map(myFunction);
                for (var u in m) {
                    alert(m[u]);
                }
         
                $('#option option')
                    .hide()    // 1
                    .filter(function () {
                       return students.filter(v => v.InProgress === 1 && v.TestId === $("#Tests option:selected").val()).map(myFunction);
                    }).show();
            } else {
                // Show all
                $('#option option').show();
            }
        });
    });
});

Here is some code that demonstrates the proof of concept

 <!---  A person can select a test that will show all of the students that need to take it.-->
<select id="Tests">
    <!-- All available tests should be in the selection box all of the time -->
    <option value = "0">All available tests</option>
    <option value = "1" selected>Math Test</option>
    <option value = "2">Science Test</option>
</select>
<select id="Students">
    <option value = "31">Cal Culus</option>
    <option value = "19">Al Gebra</option>
    <option value = "39">Matt Thematics</option>
</select>
<!--- Or a person can select a student that will show all of the tests he/she needs to take-->
<select id="Tests" >
    <option value = "42">Music Theory Test</option>
    <option value = "91">Rocket Science Test</option>
    <option value = "16">Philospohy Test</option>
</select>
<select id="Students">
    <!-- All available people should be in the selection box all of the time -->
    <option value = "0">All available people</option>
    <option selected value = "997">Ang Ziety</option>
    <option value = "188">John Doe</option>
    <option value = "361">Jane Doe</option>
</select>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source