JSFiddle - React, Tailwind, and code Playground

by total70

HTML

<select name="Vereniging" id="Vereniging_list" class="select2 full-width-fix required">
    <option value="0">Kies een verenging</option>
    <option value="1">Vereniging 1</option>
    <option value="2">Vereniging 2</option>
</select>
<select name="Team" id="Team_list" class="select2 full-width-fix required">
    <option value="1" data-verengingid="1">Team A</option>
    <option value="2" data-verengingid="1">Team B</option>
    <option value="3" data-verengingid="2">Team AB</option>
    <option value="4" data-verengingid="2">Team AGH</option>
    <option value="4" data-verengingid="2">Team AFC</option>
</select>

JavaScript

$(function () {
    var $verenging = $("#Vereniging_list");
    var $teams = $("#Team_list");
    var $options = $("#Team_list").children('option').clone();

    DomEvents();

    function DomEvents() {
        $verenging.change(function () {
            var verengingId = $(this).find("option:selected").val();

            $teams.children('option').remove();
            $options.clone().filter(function () {
                var teamId = $(this).data('verengingid');
                if (teamId == verengingId) {
                    $(this).appendTo($teams);
                }


            })
        }).trigger('change');
    }
});