Отслеживание кликов по конкретному выпадающему элементу Select2 - PullRequest
Новая
       14

Отслеживание кликов по конкретному выпадающему элементу Select2

0 голосов
/ 21 сентября 2018

Я работаю над A / B-тестом, и для измененного варианта я хочу отслеживать нажатия на опцию Select2.

Эта конкретная опция добавляется динамически, что, я думаю,усложняющие вещи (я также изменяю заполнитель выпадающих меню, но я не думаю, что это что-то испортило).

С моей платформой AB / тестирования я могу реально отслеживать только клики для определенного селектора , поэтому я пытаюсь выяснить, каким образом я могу выбрать выбор этого параметра.

К сожалению, я не могу изменить какую-либо саму разметку, но я могу использовать JavaScript/JQ.

Обычно, если бы я писал сценарии, я просто получил бы выбранный элемент из Select2, но в этом случае я ограничен использованием фактического селектора, в котором можно отслеживать щелчки.

Я использую прослушиватели событий для имитации и тестирования селекторов CSS (нижняя часть кода JS), но без удачи.

$(document).ready(function() {
    $('#dropdown').select2({
    	placeholder: "Old Placeholder",
      minimumResultsForSearch: -1
    });

     var newOption = {
        id: "01",
        text: 'Dynamically Added Option',
        value: "01"
     };
    
    var newOption = new Option(newOption.text, newOption.id, false, false);
    $('#dropdown').append(newOption);
    
    
   $('#dropdown').trigger('change.select2');
   
   $('.select2-selection__placeholder').html('New Placeholder'); 
   
   /******* HERE'S WHERE I'M TESTING SELECTORS FOR WHEN "DYNAMICALLY ADDED OPTION" IS SELECTED *******/
   
   // track select2 list item with an id containing the new option's id
   $('.select2-results__option[id*="01"]').on('click', function(){
   		alert("this never happens");
   });
   
   $('option[value="01"]').on('click', function(){
   		alert("this also never happens");
   });
   
});
select {
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>

<select id="dropdown">
  <option></option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

1 Ответ

0 голосов
/ 21 сентября 2018

Вы можете добавить событие изменения для выбора с небольшим тестом для нового элемента, например: 

$('#dropdown').on('change', function() {
    if ($(this).val() === '01') {
      console.log('The new option selected');
    }
});


$(document).ready(function() {
  $('#dropdown').select2({
    placeholder: "Old Placeholder",
    minimumResultsForSearch: -1
  });

  var newOption = {
    id: "01",
    text: 'Dynamically Added Option',
    value: "01"
  };

  var newOption = new Option(newOption.text, newOption.id, false, false);

  $('#dropdown').append(newOption);
  $('#dropdown').trigger('change.select2');
  $('.select2-selection__placeholder').html('New Placeholder');


  // track select2 list item with an id containing the new option's id
  $('#dropdown').on('change', function() {
    if ($(this).val() === '01') {
      console.log('The new option selected');
    }
  });
});
select {
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />

<select id="dropdown">
  <option></option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>
...