JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<select id="gameDrop">
	<option value="1:4">Team1 vs Team4</option>
	<option value="2:3">Team2 vs Team3</option>
	<option value="3:2">Team3 vs Team2</option>
	<option value="4:1">Team4 vs Team1</option>
</select>

<select id="teamDrop">
	<option value="1">Team1</option>
	<option value="2">Team2</option>
	<option value="3">Team3</option>
	<option value="4">Team4</option>
</select>

CSS

select option[disabled] {
    display: none;
}

JavaScript

$('#teamDrop').on('refreshit',function(){
    $('#teamDrop option:enabled:eq(0)').prop('selected',true);
})

$('#gameDrop').change(function() {
    $val = $(this).val();
    $val = $val.split(':');
    $('#teamDrop option').prop('disabled',true);
    $.each($val,function(index,value){
        $('#teamDrop option[value="'+value+'"]').prop('disabled',false);
    });
    $('#teamDrop').trigger('refreshit');
})