简单的选择标签与选项不能在Chrome上工作

我跑到这个问题，我无法展开这个简单的选择标签在我的铬。简单的选择标签与选项不能在Chrome上工作

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

重现步骤：

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

我目前在Ubuntu

使用Chrome版本53.0.2785.116（64位），这适用于任何其他浏览器或移动浏览器的原生罚款，它只是为Chrome。

问题：对此的任何临时解决方法？

编辑：如果我用固定作为容器和引导form-control阶级立场此行为恶化。该选项不在铬窗口中，不可见选项。

来源

2016-09-22 Dicky Bullin

我认为它的铬问题。可能是.. – vas

@vas - 它正在为我工作 – Chetan

@Chetan，但不为我工作。只在开发模式 – vas

您不必担心mobile-device，在select-menu会是这个样子，

和debugging可以使用down和up箭头键选择菜单选项，直到铬修复这个问题。

来源

2016-09-22 11:09:06

实际上，这是我目前的临时解决方法atm ..其实，我仍然需要查看我的桌面移动设备上的选项，但现在可以做到了。Thx为您的响应.. –

铬铬版本存在问题。
即使问题开发人员模式存在，它选择的选项将罚款@mobileDevice
任何影响呈现一个下拉列表，数据选择器，选择选项
尝试重新安装Chrome浏览器版本。
解决开发人员模式问题。

来源

2016-09-22 11:34:30

原油长篇大论的解决方法，但上档可以让你风格的定制菜单：

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

来源

2016-09-22 11:53:36 Sam0

添加一个div Chrome和Chromium浏览器数据抽头-disabled属性像这样：

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

来源

2017-10-06 07:18:05

简单的选择标签与选项不能在Chrome上工作

回答

相关问题