Простой тег select с параметрами, не работающими в Chrome.

Ответ 1

Вам не нужно беспокоиться о mobile-device, select-menu будет выглядеть примерно так:

а для debugging вы можете использовать клавиши со стрелками down и up, чтобы выбрать опции меню, пока хром не устранит эту проблему.

Ответ 2

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

$('select').each(function() {
  // set up the list
  var $this = $(this),
    $class = $this.attr('class') + ' sel',
    $id = $this.attr('id'),
    list = '',
    opts = '',
    start = '';
  $this.hide();
  $('option', this).each(function(i) {
    var content = $(this).text();
    if (i === 0) {
      start = '<div  >' + content + '</div>';
    }
    opts += '<li data-id="' + $id + '">' + content + '</li>';
  });
  list = '<ul  >' + opts + '</ul>';
  $this.after('<div class="' + $class + '" >' + start + list + '</div>');
});

// adds the clicks
$('.sel').on('click', function(e) {
  $('ul', this).fadeIn('fast');
  $('ul', this).on('mouseleave', function() {
    $(this).fadeOut('slow');
  });
});

// registers the input to the original selector
$('.sel ul li').on('click', function(e) {
  e.preventDefault();
  $('.sel ul').fadeOut('fast');
  var $this = $(this),
    target = $this.data('id'),
    num = $this.text();
  $('select#' + target).val(num).change(); // triggers the hidden selector
  $this.parent().siblings().text($this.text());
  return false;
});



// test only
$('select').on('change', function() {
  $("#monitor").text(this.value); // or $(this).val()
});

.sel {
  width: 3em;
  background: #fff;
  cursor: pointer;
  text-align: center;
  border: 1px solid #09f;
}

.sel ul {
  display: none;
  position: relative;
  left: 0em;
  top: -1em;
  width: 3em;
  margin: 0em;
  padding: 0em;
  cursor: pointer;
  background: #fff;
  text-align: center;
  list-style-type: none;
}

.sel ul li:hover {
  background: #bbb;
}

#monitor {
  position: fixed;
  left: 3em;
  width: 3em;
  height: 1em;
  bottom: 4em;
  background: #09f;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select id="filterCategory" class="">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>


<div id='monitor'>test</div>

Ответ 3

• Проблема существует с версией chromeor chromium.
• Даже если проблема существует в режиме разработчика, она выбирает опцию в @mobileDevice
• Влияет на все, что делает dropDown, сборщик данных, select-option
• Попробуйте переустановить версию Chrome.
• Проблема с режимом разработчика будет разрешена.

Ответ 4

добавьте div для хромового и хромового браузера с атрибутом отключения данных:

<div data-tap-disabled="true">
  <select>
  </select>
</div>