我试图从 DOM 中定位 select2 元素,并将 keyup 事件附加到其输入字段。因为元素是隐藏的,并且是在按下选择后创建的,所以我无法为输入设置任何 id 或类名。我使用以下代码使其与事件委托(delegate)一起工作:
$('body').on('keyup', '.select2-search__field', function() {
//TODO: do some work here
});
这工作正常,但它适用于我在页面上的所有 select2 元素。我想定位特定的 select2 元素。我还尝试获取输入的父级,以便我可以检查当前使用的是哪个 select2 元素,但这是不可能的,因为 select2 直接在主体而不是在选择元素处创建元素。因此所有 select2 元素都有相同类的父元素,无法区分。
我使用的是 4.0.4 版本的 select2,据我目前阅读的文档,没有选项可以将自定义事件附加到输入。
最佳答案
您可以使用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>
关于javascript - 在 select2 输入搜索元素添加自定义事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52865333/