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

您可以找到def parse(self, response): divs = response.css("div.contsec") for div in divs: table = div.css("table")[3] headers = table.css("tr")[0].css("td::text").extract() # print("<table headers>") print("\t".join(headers)) # print("</table headers>") for row in table.css("tr")[1:]: row_data = row.css("td::text").extract() print("\t".join(row_data))所点击的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;
}

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

3 个答案: