Выбранное раскрывающееся меню

Мне нужно изменить параметры раскрывающегося списка в соответствии с выбором. Я хотел бы использовать выбранный раскрывающийся список.

https://harvesthq.github.io/chosen/

Я сделал скрипку, и она отлично работает.

https://jsfiddle.net/3hkhcycg/12/

Проблема в том, что я не могу заставить его работать в моем проекте. Боюсь, я не включаю нужные вещи в нужное место.

Вот как и где я включаю вещи.

В конце тега head:

<link rel="stylesheet" href="../Libs/chosen_v1.6.2/docsupport/prism.css">
<link rel="stylesheet" href="../Libs/chosen_v1.6.2/chosen.css">

Где-то перед головой

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../Libs/chosen_v1.6.2/chosen.jquery.js" type="text/javascript"></script>
<script src="../Libs/chosen_v1.6.2/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
//HTML code that describes my elements
//JS code in a script tag with jquery

Я заметил, что:

• if I put JS code inside $(document).ready
  • it gives an error: Uncaught TypeError: $(...).chosen is not a function
• if it's outside $(document).ready
  • there is no error, the drop-down field looks like a chosen drop-down, but it doesn't change the content according to selection.
• if it's outside $(document).ready and I remove $(".chosen_class").chosen({ width:"90%"})
  • it changes the content but, of course, it does not look like a chosen drop-down

Обновление: мне нужны раскрывающиеся списки для всплывающего окна, которое активируется из класса JS. Кода много, я покажу здесь соответствующий.

MyClass.prototype.showPopUp= function(){
     document.getElementById('my_div').style.display = "block";
}
<div id="my_div" style = "display:none;">
    <form>
        <select id="select1" >
            <option value=""></option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        <select id="select2" class="chosen_class" data-placeholder="Select here" multiple>
        </select>
    </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script>
$(document).ready(function () {
    $(".chosen_class").chosen({
        width:"90%"
    });
    $("#select1").change(function () {
        var letter = $(this).val();
        $('#select2').empty();
        if (letter == "A") {
            $('#select2')
                .append("<option value='letter A'>letter A</option>")
                .trigger("chosen:updated");
        } else if (letter == "B") {
            $('#select2')
                .append("<option value='letter B'>letter B</option>")
                .trigger("chosen:updated");
        } else if (letter == "C") {
            $('#select2')
                .append("<option value='letter C'>letter C</option>")
                .trigger("chosen:updated");
        }
    });
});

Все находится в myFile.php. Я включаю этот файл в свой проект следующим образом:

           <?php require_once(ROOTPATH."/myFile.php"); ?>
     </body>
</html>