JSFiddle - React, Tailwind, and code Playground

HTML

<select id="project">
  <option value="">None</option>
  <option value="33">Some Project</option>
  <option value="32">Best project ever</option>
  <option value="31" selected="selected">Another project</option>
</select>

<select id="person">
  <option data-project_ids="[31, 33]" value="65">John</option>
  <option data-project_ids="[31]" value="66">Liz</option>
  <option data-project_ids="[]" value="67">Jim</option>
</select>

JavaScript

function CheckProjects() {    
    var curProject = parseInt($('#project').val()); //Get the current select project and make it an integer
    $('#person option').each(function () { //Loop through each option
        var arrProjects = JSON.parse($(this).attr('data-project_ids')); //Put the array of projects in a variable
        if ($.inArray(curProject, arrProjects) > -1) { //If current project ID is in array of projects
            $(this).show(); //Show the option
        } else { // Else if current project ID is NOT in array of projects
            $(this).hide(); //hide the option
        }
    });
    //this is to stop the dropdown displaying a hidden option on project change
    if ($('#person :selected').is(':hidden')) { //If the selected person is now hidden
        $('#person').val(''); //Reset the person select box
    }
}

CheckProjects(); //Call the function when we run the page (at bottom of page, or within $(document).ready or something similar)
$('#project').on('change', function() { //When we change the project, call the function
    CheckProjects();
});