一页中有多个select2下拉列表

Question

<script>
  var delay = (function(){
        var timer = 0;
        return function(callback, ms){
          clearTimeout (timer);
          timer = setTimeout(callback, ms);
        };
      })();
  $(document).ready(function(){
      $(".selectable").select2();
      $('.select2-results').on('scroll',chk_scroll);
      $('.select2-input').keyup(function() {
          delay(function(){
            search_box();
          }, 500 );
      });
  });

  function chk_scroll(e)
  {
      var elem = $(e.currentTarget);
      if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
      {
        var current = $('.current-page').val();
        var page = parseInt($("#page-num").val());
          var data_url;
        if(current=="data-source")
          data_url="/data_source/more_data_types";
        else if (current=="rules")
            data_url="/rules/more_rules";
        else
          data_url="/get/rules/more_data_sources"
          $('#ajaxSpinnerContainer').html('<div class="loaderBlock"> Loading... </div>').show();
        $.ajax({
          type: "GET",
          url: data_url,
          data: { page:page, type:"page"}
        }).done(function( data ) {
          if(data.length>0){
          var plain_html ='';
          $.each(data, function(a) {
              if(current =="rules"){
                  plain_html += '<option value="'+ data[a].id +'">'+ data[a].description +'</option>';

              }else{
                  plain_html += '<option value="'+ data[a].id +'">'+ data[a].name +'</option>';
              }
          });
          if(current=="data-source"){
            $('#data_source_type').append(plain_html);
          }
          else if(current=="rules"){
              $('#rule_downstream_rule').append(plain_html);
          }else{
            $('#rule_data_source').append(plain_html);
          }
          $(".loaderBlock").hide();
            initialize();

          document.getElementById('page-num').value=page+1;
          $('.select2-results').scrollTop(page*110);

          // elem.scrollTop();
        }});
      }

  }
  function search_box(){
    var current = $('.current-page').val();
    var page = $('.select2-input').val();
    if(current=="data-source")
      var data_url="/data_source/more_data_types";
    else
      var data_url="/rule/more_data_sources"
    $.ajax({
      type: "POST",
      url: data_url,
      data: { page:page}
    }).done(function( data ) {
      var plain_html ='';
      $.each(data, function(a) {
          plain_html += '<option value="'+ data[a].id +'">'+ data[a].name +'</option>';
      });
      if(current=="data-source")
        $('#data_source_type').html(plain_html);
      else
        $('#rule_data_source').html(plain_html);
      initialize();
      $('.select2-input').val(page);
      });
    document.getElementById('page-num').value=2;
  }
  function initialize(){
    $(".selectable").select2("destroy");
    $(".selectable").select2();
    $(".selectable").select2("open");
    $('.select2-results').on('scroll',chk_scroll);
    $('.select2-input').keyup(function() {
      delay(function(){
        search_box();
      }, 500 );
    });
    $.ready();
  }
  </script>

这里我有两个选择下拉列表，我在其中使用了select2。现在的问题是，当我向下滚动时，两个选择下拉列表都会打开。我该如何解决这个问题？我相信这是导致问题的那个$('.select2-results').on('scroll',chk_scroll);，因为下拉列表中的类是相同的。我也尝试改变那个css但是不成功，因为在select2的docs中没有方法来添加新类。