Почему при выборе select не появляется блок?

Question

[BuBux]

<div class="form-group">
    <label>Принадлежность</label>
    <div>
        <select class="form-control select2" id="affiliation" name="affiliation">
            <option>Выбрать</option>
            <option value="a1_54">Внутренний сотрудник</option>
            <option value="a2_54">Клиент</option>
         </select>
     </div>
</div>
<div class="form-group" id="container">
    <div id="a1_54">
        <label>Внутренние сотрудники</label>
        <select id="asd" name="asd" class="form-control select2">
            <option>Первый</option>
            <option>Второй</option>
        </select>
    </div>
    <div id="a2_54">
        <label>Клиенты</label>
         <select id="dsa" name="dsa" class="form-control select2">
             <option>Первый</option>
             <option>Второй</option>
         </select>
    </div>
</div>

$(document).ready(function() {

        $('#container div').css('display','none'); 

        $('#affiliation').change(function(){ 
            $('#container div').css('display','none'); 
            id = $('#affiliation option:selected').val(); 
            $('#'+id).show();
        });

    });

Подключил библиотеку:
https://ajax.googleapis.com/ajax/libs/jquery/1.9.0...
Если в первом блоке убрать класс class="form-control select2", то всё будет работать. Но мне необходимо с ним. В JS толком не понимаю, поэтому не знаю что надо поменять в коде.

Comments

[Comsequent]

id = $('#affiliation option:selected').val();

Попробуйте добавить
const или let или var

Answer 1

[Иван]

Нужно объявить const id. После проверить console.log(id) находит ли правильно id

$(''#affiliation').on('change', function (e) {
    const optionSelected = $("option:selected", this);
    const id = this.value;
    ....
});

Comments

[BuBux]

не подскажите, что в моем коде надо поменять конкретно и на что? С JS не знаком...

[Иван]

$('#affiliation').change(function(){ 
            $('#container div').css('display','none'); 
            id = $('#affiliation option:selected').val(); 
            $('#'+id).show();
        });

поменять на

$(''#affiliation').on('change', function (e) {
    const optionSelected = $("option:selected", this);
    const id = this.value;
    $('#'+id).show();
});

[BuBux]

Иван, в первой строке Вы наверное опечатку допустили, ''#affiliation'. Наверное надо так : '#affiliation'
Но даже исправив это, всё равно не работает

[Иван]

Обновите jqery У меня jQuery v3.4.1
Тогда ваш код тоже рабочий. Проверил

[BuBux]

Иван, подключил https://ajax.googleapis.com/ajax/libs/jquery/3.4.1... , но почему-то всё равно не работает