在select2输入搜索元素上添加定制事件

Question

我正在尝试从DOM中定位一个select2元素，并将一个keyup事件附加到它的输入字段。 因为按下选择后隐藏并创建了该元素，所以我无法为输入设置任何id或类名。 我使用以下代码将其与事件委托一起使用：

$('body').on('keyup', '.select2-search__field', function() {
    //TODO: do some work here
}); 

这很好，但是它适用于页面上所有的select2元素。 我想定位一个特定的select2元素。 我也尝试获取输入的父级，以便可以检查当前使用了哪个select2元素，但由于select2直接在主体而非选择元素上创建元素，因此无法进行检查。 因此，所有select2元素的父级都具有相同的类，因此无法区分。

我使用的是select2的4.0.4版本，到目前为止，正如我阅读的文档所述，没有选项可以将自定义事件附加到输入。

Answer 1

您可以使用index()和.select2-container--open类来查找项目。

 $(document).ready(function(){ $('select').select2(); }) $('body').on('keyup', '.select2-search__field', function() { var selectItem = $('.select2-container--open').prev(); var index = selectItem.index(); var id = selectItem.attr('id'); alert('index of the item =' + index +' and the id = '+ id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <select id="first"> <option value="a">aaaaaaaaaaaaaaa</option> <option value="b">bbbbbbbbbbbbbbb</option> <option value="c">ccccccccccccccc</option> </select> <select id="second"> <option value="1">111111111111</option> <option value="2">222222222222</option> <option value="3">333333333333</option> </select> <select id="third"> <option value="q">qqqqqqqqqq</option> <option value="w">wwwwwwwwww</option> <option value="e">eeeeeeeeee</option> </select> 

Answer 2

您可以在选择器中使用:eq ; https://api.jquery.com/eq-selector/

eq（1），因为要第二个索引从0开始

$('body').on('keyup', '.select2-search__field:eq(1)', function() {
    //TODO: do some work here
});

请运行该代码段并更改选择字段的值；

 $(document).on("change", ".select2-search__field:eq(1)", function() { alert("Hello World!"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="select2-search__field"> <option>A1</option> <option>A2</option> <option>A3</option> </select> <select class="select2-search__field"> <option>B1</option> <option>B2</option> <option>B3</option> </select> <select class="select2-search__field"> <option>C1</option> <option>C2</option> <option>C3</option> </select> 

Answer 3

您可以找到$(".select2-container--open").prev();单击的select $(".select2-container--open").prev(); 并检查它是否具有您添加的特定data-attribute ，以确定是否进行填充。

 $(document).ready(function() { $('.my-select').select2(); }); $('body').on('keyup', '.select2-search__field', function() { let $select = $(".select2-container--open").prev(); if($select.data("show")) { // TODO: do some work here console.log(this.value) } }); 

 select { width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" /> <div> <select class="my-select"> <option value="1">Option1</option> <option value="2">Option2</option> </select> </div> <div> <select class="my-select" data-show="true"> <option value="3">Option3</option> <option value="4">Option4</option> </select> </div>