How to hang an event on select class="form-control select2"?

Question

css

<div class="form-group col-md-6" style="overflow:hidden; padding-left: 0px;">
    <label for="field-1" class="control-label">Направление</label>
                                            
    <?php if (is_array($directions)): ?>
        <select id="direction" class="form-control select2" name="direction[]" style="width: 100%;" multiple>
            <?php foreach ($directions as $direction): ?>
                <option value="<?=$direction['ID']?>">
                    <?php echo $direction['NAME']; ?>
                </option>
            <?php endforeach; ?>
        </select>
    <?php endif; ?>
</div>

How can I hang the change event? And it is desirable that the appeal be by id.
Tried like this:

$(document).on('change', '#direction', function () {
    console.log('yes');
});

But nothing works. I read to the point that it is necessary to handle select2 differently, but I did not find how exactly.

Answer 1

Class in bootstrap .text-center

Answer 2

$("#direction").change(function () {
    console.log('yes');
});