Ukryj opcje w elemencie select, nie działa w IE?

Question

Powiel możliwe:
Hide select option in IE using jQuery

Więc jak widać poniżej, mam dwóch wybranych elementów. Pierwsza z nich ma dwie wartości: 1,4 i 1,7. W zależności od wybranej opcji chcę wyłączyć pewne opcje w drugim zaznaczonym elemencie. Działa doskonale w chromie, ale IE jest suką (jak zwykle!).

Jakieś pomysły, co jest nie tak?

<p> 
    <label style="width: 155px; display: inline-block;">Height</label> 
    <select name="height"> 
     <option value="1.4">1.4</option> 
     <option value="1.7">1.7</option> 
    </select> 
</p> 
<p> 
    <label style="width: 155px; display: inline-block;">Amount</label> 
    <select name="slanor"> 
     <option class="four" value="2">2</option> 
     <option class="four seven" value="3">3</option> 
     <option class="seven" value="4">4</option> 
    </select> 
</p> 


<script> 
$(document).ready(function() { 
    check(); 

    $('select[name=height]').change(function() { 
     check(); 
    }); 

    function check() { 
     var slanor = $('select[name=slanor]'); 
     var currHeight = $('select[name=height]').val(); 

     if(currHeight == '1.4') { 
      slanor.find('option').hide(); 
      slanor.find('.four').show(); 
     } else { 
      slanor.find('option').hide(); 
      slanor.find('.seven').show(); 
     } 
    } 
}); 
</script> 

Answer 1

Pojęcie ukrytego options w select nie istnieje w IE. Będziesz musiał ręcznie usunąć i ponownie dodać wpisy, co może być nieco niedogodne.

Innym rozwiązaniem byłoby również wyłączyć elementy:

slanor.find(option).hide().prop('disabled', true); 

To ukryje opcję we wszystkich przeglądarkach, które go obsługują, ale go wyłączyć w IE, co oznacza, że ​​będzie ona nadal być widoczny, ale wizualnie odróżnić od innych opcji i nie można ich wybrać.

Jednak: czy problem jest dokładnie tak, jak zostały opisane, a tam są tylko dwie opcje, że skrypt będzie zmieniać się na najprostszym rozwiązaniem mogłoby być hide i show dwóch różnych rozwijanego menu w całości, w zależności, która opcja jest wybrany.

Answer 2

Wywołanie funkcji .hide() w jQuery powoduje wyświetlenie: brak elementu. Wątpię, czy to standardowy HTML, w którym można ukryć opcje w ten sposób.

Można użyć tego kodu, zamiast:

slanor.empty(); 
if (currHeight == '1.4') { 
    slanor.append($('<option'>).val('2').text('2')); 
    slanor.append($('<option'>).val('3').text('3')); 
} 
else { 
    slanor.append($('<option'>).val('3').text('3')); 
    slanor.append($('<option'>).val('4').text('4')); 
} 

Answer 3

Opcja tag nie obsługuje wyświetlania atrybutu css. Właśnie to robi show()/hide(). Najlepiej jest usunąć i ponownie utworzyć opcje, gdy są potrzebne. Albo myślę, że możesz dołączyć je do innego ukrytego przedmiotu i odciągnąć je, gdy będziesz ich potrzebował.

Więc trzeba coś

$("option").appendTo($("#myhiddenselect")); 
$(".four").appendTo($("#myvisibleselect"));