Выпадающий список JavaScript не работает на мобильных устройствах

Question

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

Он работает на настольном компьютере, но когда я пробую его на мобильных устройствах, он не меняет содержимое.

Я ломал голову уже пару дней.

HTML:

<select class="compare-dropdown"> 
  <option selected="selected">1 Year account</option> 
  <option>2 Year account</option> 
  <option>3 Year account</option> 
  <option>5 Year account</option> 
</select> 

Javascript:

// DIRTY Responsive pricing table JS

$( "select" ).on( "change", "option", function() {
  var pos = $(this).index()+2;
  $parent = $(this).closest('article');
  $parent.find("tr").find('td:not(:eq(0))').hide();
  $parent.find('td:nth-child('+pos+')').css('display','block');
  $parent.find("tr").find('th:not(:eq(0))').hide();
});

// Initialize the media query
  var mediaQuery = window.matchMedia('(min-width: 640px)');

  // Add a listen event
  mediaQuery.addListener(doSomething);

  // Function to do something with the media query
  function doSomething(mediaQuery) {    
    if (mediaQuery.matches) {
      $('.sep').attr('colspan',5);
    } else {
      $('.sep').attr('colspan',2);
    }
  }

  // On load
  doSomething(mediaQuery);

Если у вас есть помощь, которая будет принята с благодарностью

Answer 1

Второй аргумент должен быть функцией обратного вызова:

$( "select" ).on( "change", function() {
  var pos = $(this).index()+2;
  $parent = $(this).closest('article');
  $parent.find("tr").find('td:not(:eq(0))').hide();
  $parent.find('td:nth-child('+pos+')').css('display','block');
  $parent.find("tr").find('th:not(:eq(0))').hide();
});