在 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

您可以找到$(".select2-container--open").prev();正在单击的select，并检查它是否具有您添加的特定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>

Answer 3

您可以在选择器中使用: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>