Jquery dynamic select

<html>
    <head>
        <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <form action="getchar.php" method="POST">
            <select id="selectacc" name="selectacc">
                <option value="1">Foo</option>
                <option value="2">Bar</option>
            </select>
            <select id="race" name="race" disabled></select>
        </form>
        <script>
        $(function() {
            $('#selectacc').on('change', function() {
                var uid = $(this).val();
                $.post('getchar.php', {id: uid}, function(data) {
                    //Remove all option-tags in #race
                    $('#race').html('');
                    //Make #race selectable
                    $('#race').removeAttr('disabled');
                    //Loop through all items
                    //and adds them to #race
                    $.each(data, function(i) {
                        $('#race')
                            .append($('<option></option>')
                            .attr('value', data[i].id)
                            .text(data[i].name));
                    });
                });
            });
        });
        </script>
    </body>
</html>