Добавить пользовательское событие в элемент поиска select2 input - PullRequest
Новая
       9

Добавить пользовательское событие в элемент поиска select2 input

0 голосов
/ 18 октября 2018

Я пытаюсь нацелиться на элемент select2 из DOM и прикрепить к его полю ввода событие keyup.Поскольку элемент скрыт и создан после нажатия выбора, я не могу установить какой-либо идентификатор или имя класса для ввода.Я сделал так, чтобы он работал с делегированием событий, используя этот код: 

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

Это прекрасно работает, однако оно работает для всех элементов select2, которые у меня есть на странице.Я хочу нацелиться на определенный элемент select2.Я также попытался получить родительский элемент для ввода, чтобы я мог проверить, какой элемент select2 используется в настоящее время, но это невозможно, поскольку select2 создает элементы непосредственно в теле, а не в элементе выбора.Таким образом, все элементы select2 имеют родителей с одинаковыми классами и не могут быть дифференцированы.

Я использую версию select2 4.0.4, и, как я читал до сих пор, в документации нет возможности прикрепить пользовательское событие к входу.

Ответы [ 3 ]

0 голосов
/ 18 октября 2018

Вы можете использовать :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>
0 голосов
/ 18 октября 2018

Вы можете найти 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>
0 голосов
/ 18 октября 2018

Вы можете использовать класс 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>
...