簡單的選擇標籤與選項不能在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上工作

回答

相關問題