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

【问题标题】：Why does a jQuery plugin stop my custom function from working?为什么 jQuery 插件会阻止我的自定义函数工作？
【发布时间】：2020-05-13 12:55:41
【问题描述】：

我想让我的下拉菜单（HTML 选择）可搜索，并且还基于从下拉菜单中选择的值，我想在 textarea 中输入一些文本。

根据所选值将文本添加到 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/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>

在这个小提琴中，基于所选值将文本添加到 textarea 的 javascript 工作：Fiddle1

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

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

【问题讨论】：

发生这种情况是因为 select2 用自定义 HTML 替换了 DOM 中的 select 元素，并隐藏了 select 元素本身。它仍然在原始select 元素上设置用户选择的值 - 但因为现在通过脚本发生，它不再触发change 事件。您现在需要通过 select2 提供的事件来处理这个问题。 select2.org/programmatic-control/events

标签： javascript html jquery jquery-select2

【解决方案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

【讨论】：