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

Question

我想让我的下拉菜单 (HTML select) 可搜索，并且还基于下拉菜单中的值 select 我想在文本区域中输入一些文本。

根据 selected 值将文本添加到文本区域的 javascript 代码简单且有效。

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 = '';
            };              
        });
    };
};

但是，一旦我添加了处理下拉列表可搜索功能的 Jquery 插件 (Select2)，上面的 javascript 代码就停止工作了。

<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>

在此 fiddle 中，根据 selected 值将文本添加到文本区域的 javascript 有效：Fiddle1

在此 fiddle 中可搜索的作品：Fiddle2

有什么办法可以避免这种冲突吗？两部分代码都有效吗？

Answer 1

@CBroe 指出的解决方案是使用 here 所述的 Select2 事件。

解决问题的代码：

<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

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

Why does a jQuery plugin stop my custom function from working?

html

javascript

jquery

jquery-select2