Błąd przeglądarki Chrome w menu wyboru elementu, gdy ukryto wiele opcji.

Question

Szukam obejścia problemu z błędem renderowania w przeglądarce Chrome. Pojawia się, gdy wybrany element ma około 90% + ukrytych elementów opcji. W Chrome wysokość rozwijania staje się zbyt krótka, aby można jej było użyć. Wygląda na to, że nie dzieje się tak w innych przeglądarkach. View example on jsFiddle.

HTML Example 
Note: Some options were removed to keep the code brief. 
The bug does not show up unless all options are present. 

100 Options, 90% Hidden:<br> 
<select> 
<option value="">Select an Option</option> 
<option value="0" style="display: none">Option 0</option> 
<option value="1" style="display: none">Option 1</option> 
<option value="2" style="display: none">Option 2</option> 
<option value="3" style="display: none">Option 3</option> 
<!-- Options removed for brevity. --> 
<option value="86" style="display: none">Option 86</option> 
<option value="87" style="display: none">Option 87</option> 
<option value="88" style="display: none">Option 88</option> 
<option value="89" style="display: none">Option 89</option> 
<option value="90">Option 90</option> 
<option value="91">Option 91</option> 
<option value="92">Option 92</option> 
<option value="93">Option 93</option> 
<option value="94">Option 94</option> 
<option value="95">Option 95</option> 
<option value="96">Option 96</option> 
<option value="97">Option 97</option> 
<option value="98">Option 98</option> 
<option value="99">Option 99</option> 
</select> 

przeglądarki Testowany:

• Chrom 27 & 28 (fail)
• Firefox 21 (przepustem)
• IE 9 (przepustem)
• opera 12 (Pass)
• Safari 5.1 (Przełęcz)

View Example on jsFiddle
Alternate Example Link

Aktualizacja: Zrobiłem kilka czytania na ten temat, i najwyraźniej opcje nie mają być ukryte w select. Możesz wyłączyć opcje, ale one nie znikną. Jeśli nie chcesz, aby opcja znajdowała się w selekcji, powinieneś całkowicie usunąć węzeł. Możliwość ukrywania opcji nie wydaje się działać całkowicie w różnych przeglądarkach, a w większości można nadal wybierać "ukryte" opcje za pomocą klawiszy strzałek. Muszę włączać i wyłączać opcje, co sprawia, że ​​jest to niewygodne dla mojej konkretnej sytuacji, ale wydaje się, że jest to jedyna metoda, która do tej pory zadziała.

Answer 1

dodając ten można uznać za obejście:

$(document).ready(function() { 

    $('#ph2').mouseenter(function() { 

     var html = ''; 

     $(this).find('option').each(function() { 

      if ($(this).css('display') !== 'none') { 

       html = html + '<option>' + $(this).text() + '</option>'; 
      } 
     }); 

     $(this).html(html); 
    }) 
}); 

Oto jsFiddle; Używam jquery tylko dla prostoty. W tym przypadku po prostu ponawiam HTML na mouseenter. To nie jest idealne, ale może sprawić, że pójdziesz dalej. Zauważ, że masz ph2 skonfigurowany jako div w swoim HTML; Myślę, że powinieneś ustawić go jako element wyboru od samego początku, a na skrzypcach możesz zobaczyć zmiany wprowadzone w html. Ale ogólnie rzecz biorąc, dopóki błąd nie zostanie naprawiony, myślę, że coś takiego stanie się tak bliskie, jak to tylko możliwe.

Answer 2

Najlepszym rozwiązaniem jest dodanie na końcu ostatniego

<option></option> w swojej Wybierz element. Dodaj ten kod:

<optgroup></optgroup>

Spowoduje to dodanie pustego elementu grupy, a teraz jest najlepszy Łatwy i szybki FIX do tej rzadkiej BUG.

Dzięki!

Answer 3

Znalazłem, że kolejność ukrytych/widocznych opcji robi różnicę. To tak, jak przystanki z chromu liczą się do wysokości rozwijanej przy pierwszej ukrytej opcji. Jednym ze sposobów jest przeniesienie pokazanych opcji na górę zaznaczenia. Jeśli używasz jquery coś takiego.

var select = "select#MySelect"; 
$(select).children("option").hide(); //hide all options 
$(select).children("Selector for items to show").each(function(idx, elm) { 
      $(elm).parent().prepend(elm); //move item to the top of parent 
}); 
$(select).children("Selector for items to show").show(); //show selected options 

Answer 4

Jako obejście tego błędu mogę zaproponować następujące rozwiązanie:

• Aby ukryć opcję „przekształcenia” go do innego znacznika i ukryć go z .hide().
• Aby wyświetlić opcję "przekonwertuj" ją z powrotem na option i wyświetl ją z .show().

Do "konwersji" potrzebujemy czegoś takiego: https://stackoverflow.com/a/9468280.

Przykład:

// some `replaceTagName` implementation here 

// hiding options 
$('.option-selector').replaceTagName('span').hide(); 

// showing options 
$('.option-selector').replaceTagName('option').show(); 

trochę ciężkie, ale działa :)

Answer 5

wpadłem na ten sam problem (Chrome 40) i stwierdzili, że następujące obejście działa dobrze dla mnie.

var originalOptions = []; 

$(document).ready(function(){ 
    originalOptions = $("yourSelect").children("option"); 

    $("someElement").someEvent(function(){ 
     $("yourSelect").children("option").remove(); 
     $(originalOptions).each(function(){ 
      if(/*criteria here*/){$("yourSelect").append($(this));} 
     }); 
    }); 
}); 

Answer 6

miałem ten problem i to jest to, co zrobiłem:

var originalSelect = $("#the_select").clone(); 

function hideSomeOptions(){ 
    $('#the_select .hide_me').remove(); 
} 

function restoreAllOptions(){ 
    $("#the_select").replaceWith(originalSelect[0]); 
} 

Cel wybierz wejście ma identyfikator „the_select” i opcji lub optgroups które muszą być przełączane mają „hide” klasa.