Chrome

Question

üzerinde çalışmayan seçeneklere sahip basit bir seçim etiketi Bu krom kaplamada bu basit seçim etiketini genişletemediğim bu soruna rastladım.

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

Yeniden oluşturma adımları: (Chrome) Yukarıdaki

1. Çalıştır kod parçacığını,
Geliştiriciler Modu (F12) için
2. Git
3. Geçiş mobil cihaz modunu (Varsayılan olarak Ctrl + ÜstKrkt + M)

Şu anda Ubuntu

Chrome Sürüm 53.0.2785.116 (64-bit) kullanıyorum

Bu sadece Chrome için var, başka bir tarayıcı veya mobil yerli tarayıcılarda sorunsuz çalışıyor.

Soru: Bunun için herhangi bir geçici çözüm?

Düzenleme: kabı ve bootstrap gelen form-control sınıf olarak sabit konumda kullanmak, bu davranış kötüye edilir . Bu seçenek görünmez seçeneklerle krom pencereden çıkar.

Answer 1

Sen, yaklaşık mobile-device, select-menu bu gibi bir şey olacaktır

ve debugging için size krom düzeltme dek menü seçeneklerini belirlemek için down ve up ok tuşunu kullanabilirsiniz endişelenmenize gerek yok bu konu.

Answer 2

• Sayı chromeor krom sürümü ile mevcuttur.
• konu geliştirici modunda mevcut olsa bile, @mobileDevice
• yılında ince olacak seçeneğini bir açılan, veri seçici kılan şey etkiler, seçmek-seçenek
• Krom Sürüm yeniden deneyin. geliştirici modu ile
• Sayı çözülecektir.

Answer 3

ham uzun soluklu çözüm, ama üzerinde ters stil özelleştirilmiş menülere sağlar:

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

Answer 4

veri kademe engelli özniteliği ile krom ve krom tarayıcı için bir div eklemek böyle:

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