Question

我遇到了这个问题，我无法在我的Chrome上展开这个简单的选择标记。

＆＃13;

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

＆＃13;

重现的步骤：

在上方运行代码段（在Chrome上），
转到开发者模式（F12），
切换移动设备模式（默认为Ctrl + Shift + M）

我目前在Ubuntu上使用Chrome版本53.0.2785.116（64位）

这适用于任何其他浏览器或移动原生浏览器，仅适用于Chrome。

问题：此临时解决方法是什么？

编辑：如果我使用固定位置作为其容器并使用bootstrap中的form-control类，则此行为会变得更糟。该选项位于带有隐藏选项的Chrome窗口之外。

Answer 1

您不必担心mobile-device，select-menu会看起来像这样，

对于debugging，您可以使用down和up箭头键选择菜单选项，直到Chrome修复此问题。

Answer 2

粗略的长期解决方案，但在好处上允许您设置自定义菜单的样式：

＆＃13;

$('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()
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

铬铬版本存在问题。
即使在开发者模式中存在问题，它也会在@mobileDevice
影响渲染dropDown，数据选择器，选择选项
尝试重新安装Chrome版本。
解决开发者模式问题。

Answer 4

为chrome和chromium浏览器添加div，并使用data-tap-disabled属性，如下所示：

＆＃13;

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

＆＃13;

简单的选择标记，其选项不适用于Chrome

4 个答案: