时间戳

首页 > 解决方案 > 跟踪特定 Select2 下拉项的点击次数

javascript - 跟踪特定 Select2 下拉项的点击次数

问题描述

我正在进行 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>

标签： javascriptjquerycssjquery-select2

解决方案

您可以为选择添加一个更改事件，并对新元素进行一个小测试，例如：

$('#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>

推荐阅读