Почему не работает AddEventListener?

Делаю веб-приложение на ASP.NET Core. Конкретно сейчас нужно сделать форму для оформления заказа. В форме есть поле с выбором типа лица, на которое будет оформлен заказ(физическое или юридическое лицо). Если мы выбираем юридическое лицо,из выпадающего списка, то снизу должен появляться ещё один выпадающий список, в котором можно выбрать одно из юридических лиц. Форма выглядит следующим образом

<div id="order">
    <form id="orderForm" method="post" action="@Url.Action("MakeOrder", "Home")">
        <h3 class="text-center">Оформление заказа</h3>

        <div class="mb-3">
            <label class="form-label">Тип клиента</label>
            <select class="form-select" id="clientType" name="clientType">
                <option value="individual">Физическое лицо</option>
                <option value="legal">Юридическое лицо</option>
            </select>
        </div>

        <div class="mb-3" id="companyField" style="display: none;">
            <label class="form-label">Юридическое лицо</label>
            <select class="form-select" id="legalEntityId" name="legalEntityId">
                <option value="">Выберите компанию</option>
                @foreach (var company in ViewBag.LegalEntities)
                {
                    <option value="@company.Id">@company.CompanyName</option>
                }
            </select>
        </div>

        <div class="mb-3">
            <label class="form-label">Адрес</label>
            <input type="text" class="form-control" placeholder="Введите адрес" name="address" required>
        </div>

        <div class="mb-3">
            <label class="form-label">Выбор продукции</label>
            <div id="productList">
                <div class="d-flex mb-2 product-item">
                    <select class="form-select me-2" name="products[]">
                        @foreach (var product in ViewBag.Products)
                        {
                            <option value="@product.Id">@product.Name</option>
                        }
                    </select>
                    <input type="number" class="form-control" placeholder="Кол-во" min="1" name="quantities[]" required>
                </div>
            </div>
            <button type="button" class="btn btn-secondary btn-sm" onclick="addProduct()">Добавить продукт</button>
        </div>

        <div class="mb-3">
            <label class="form-label">Комментарии</label>
            <textarea class="form-control" rows="3" name="comments"></textarea>
        </div>

        <button type="submit" class="btn btn-success w-100">Отправить заказ</button>
    </form>
</div>

В site.js написал следующий код:

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('clientType').addEventListener('change', function () {
        console.log(this.value); // Проверка
        document.getElementById('companyField').style.display = this.value === 'legal' ? 'block' : 'none';
    });
});

Но дело в том, что когда меняется значение в clientType, то ничего не происходит, и даже в консоль ничего не выводит(проверка). В чём дело?