为什么一个jQuery插件会让我的自定义功能停止工作？

Question

我想让我的下拉菜单(HTML选择)可以被搜索到，并且根据下拉菜单的选择值，我想在一个文本框中输入一些文本。

根据选择的值在textarea中添加文本的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/[email protected]/dist/js/select2.min.js"></script>  
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> 

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

</script>

在这个fiddle中，根据选择的值向textarea添加文本的javascript工作。Fiddle1

在这个提琴中，可搜索的作品。Fiddle2

有什么办法可以避免这种冲突吗？并让这两部分代码都能工作？

Answer 1

正如@CBroe所指出的那样，解决方法是使用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