为什么 jQuery 插件会阻止我的自定义 function 工作？

Question

I want to have my dropdown menus (HTML select) searchable and also based on the value selected from the dropdown I want to enter some text in a textarea.

The javascript code that adds text to textarea based on the selected value is simple and works.

window.onload=function(){
    var el = document.getElementById('myselect1');
    if(el){
        document.getElementById('myselect1').addEventListener("change", function(e) {
            var value = document.getElementById('myselect1').value;
            if (value.includes('Germany')) {
                document.getElementById("mytextarea1").value = 'Text1\nText2';
            } else {
                document.getElementById("mytextarea1").value = '';
            };              
        });
    };
};

But as soon as I added the Jquery plugin (Select2) that handles the searchable functionality for the dropdown, the javascript code from above stoped working.

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>  
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /> 

<script type="text/javascript">
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
    }); 

</script>

In this fiddle the javascript that adds text to textarea based on the selected value works: Fiddle1

In this fiddle the searchable works: Fiddle2

Is there any way to avoid this conflict? And have both parts of code work?

Answer 1

Solution as pointed out by @CBroe was to use the Select2 events as described here .

Code that solved the problem:

<script type="text/javascript">
    $.noConflict();
    jQuery(document).ready(function($) {
    $(function() {
        $('.js-example-basic-single').select2();
        });
        $('#myselect1').on('select2:select', function (e) {
            var value = document.getElementById('myselect1').value;
            if (value.includes('Germany')) {
                document.getElementById("mytextarea1").value = 'Text1\nText2';
            } else {
                document.getElementById("mytextarea1").value = '';
            };  
        });
    }); 

</script>

Fiddle