Errore di Chrome sul menu a discesa dell'elemento selezionato quando molte opzioni sono nascoste

Question

Sto cercando una soluzione alternativa per un bug di rendering in Chrome. Si presenta quando un elemento select ha circa il 90% + elementi opzione nascosti. In Chrome, l'altezza del dropdown diventa troppo breve per essere utilizzata. Questo non sembra accadere su altri browser. 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> 

browser testati:

• Chrome 27 & 28 (Fail)
• Firefox 21 (Pass)
• IE 9 (Pass)
• Opera 12 (Passaggio)
• Safari 5.1 (Passo)

View Example on jsFiddle
Alternate Example Link

Aggiornamento: ho fatto qualche lettura sul soggetto, ea quanto pare le opzioni non dovrebbero essere nascosto all'interno di un prescelto. Puoi disabilitare le opzioni, ma non scompariranno. Se non vuoi che un'opzione sia nella selezione, devi rimuovere completamente il nodo. La possibilità di nascondere le opzioni non sembra funzionare completamente da browser, e nella maggior parte dei casi puoi continuare a selezionare le opzioni "nascoste" usando i tasti freccia. Ho bisogno di attivare e disattivare le opzioni, il che rende questo inconveniente per la mia situazione particolare, ma questo sembra essere l'unico metodo che funzionerà finora.

Answer 1

L'aggiunta di questo potrebbe essere considerato una soluzione:

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

Ecco il jsFiddle; Sto usando jquery solo per semplicità. In questo caso, sto semplicemente rifacendo l'HTML su mouseenter. Non è l'ideale ma potrebbe farti andare oltre. Inoltre, nota che hai ph2 configurato come div nel tuo HTML; Penso che dovresti impostarlo come elemento di selezione dall'inizio e sul violino puoi vedere la modifica apportata all'html. Ma nel complesso, finché il bug non viene risolto, penso che qualcosa del genere sarà il più vicino possibile ad avere un'opzione di lavoro.

Answer 2

La migliore soluzione è quella di aggiungere alla fine l'ultimo

<option></option> nella vostra Select Element. Aggiungere questo codice:

<optgroup></optgroup>

Questo aggiungerà un elemento di gruppo vuoto, e per ora è la migliore facile e veloce da FIX questa rara BUG.

Grazie!

Answer 3

Ho trovato che l'ordine delle opzioni nascoste/visibili fa la differenza. È come se le croste smettessero di contare per l'altezza del drop down alla prima opzione nascosta. Un modo per aggirare è spostare le opzioni mostrate nella parte superiore della selezione. Se stai usando jquery qualcosa di simile.

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

Come una soluzione per questo bug posso proporre la seguente soluzione:

• Per nascondere l'opzione 'Converti' a qualche altro tag e nasconderlo con .hide().
• Per mostrare un'opzione 'convertirlo' in option e mostrarlo con .show().

Per "conversione" abbiamo bisogno di qualcosa del genere: https://stackoverflow.com/a/9468280.

Esempio:

// some `replaceTagName` implementation here 

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

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

un po 'pesante, ma lavorando :)

Answer 5

Ho incontrato lo stesso problema (Chrome 40) e ha scoperto che la seguente soluzione funziona bene per me.

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

Ho avuto questo problema e questo è quello che ho fatto:

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

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

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

L'obiettivo di selezione dell'ingresso ha la ID "the_select" e le opzioni o optgroups che hanno bisogno di essere attivata avere il "hide_me" classe.