Ocultar opções no elemento select, não trabalhando no IE? [duplicado] - jquery, internet-explorer, select

Duplicar Possível:
Ocultar opção de seleção no IE usando jQuery

Então, como você pode ver abaixo, eu tenho dois selectelementos. O primeiro tem dois valores, 1,4 e 1,7. Dependendo da opção selecionada, desejo desativar certas opções no segundo elemento de seleção. Funciona perfeitamente bem no cromo, mas o IE está sendo uma vadia (como sempre!).

Alguma idéia do que está errado?

<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>

Respostas:

A noção de oculto options em um select não existe no IE. Você teria que remover e adicionar novamente manualmente as entradas, o que pode ser um pouco inconveniente.

Outra solução seria também desativar os elementos:

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

Isso ocultará a opção em todos os navegadores que a suportam, mas a desativará no IE, o que significa que ainda estará visível, mas visualmente distinto das outras opções e não selecionável.

Contudo: se o seu problema for exatamente o que você descreveu e houver apenas duas opções em que seu script será ativado, a solução mais simples pode ser: hide e show inteiramente duas listas suspensas diferentes, dependendo da opção selecionada.

Chamar .hide () no jQuery adiciona display: none ao elemento. Duvido que seja em HTML padrão que você possa ocultar opções dessa maneira.

Você pode usar este código:

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"));
}

A tag de opção não suporta a exibição de cssatributo. Qual é o que show () / hide () faz. Sua melhor aposta é remover e recriar as opções conforme necessário. Ou eu acho que você pode anexá-los a outro objeto oculto e puxá-los para trás quando precisar deles totalmente formados.

Então você teria algo como

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