IEで動作していないselect要素のオプションを非表示にしますか？

Question

可能性の重複：あなたは以下を参照することができますよう
Hide select option in IE using jQuery

だから、私は2つの選択の要素を持っています。最初の値は1.4と1.7の2つの値を持ちます。どのオプションが選択されているかに応じて、2番目のselect要素の特定のオプションを無効にします。それはクロムで完璧に動作しますが、IEは（いつものように）雌犬です。

何か問題がありますか？

<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

selectに隠されたoptionsの概念は、IEに存在しません。エントリを手動で削除して再追加する必要がありますが、これは多少不便かもしれません。

別の解決策は、また、要素を無効にするには、次のようになります。

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

これは、それをサポートするすべてのブラウザでオプションを隠すが、IEでそれを無効にし、それはまだ目に見えるだろうことを意味するが、視覚的になります他のオプションと区別され、選択不可能である。

しかし：あなたの問題は、あなたが説明したとおりにあり、そして、あなたのスクリプトは上で異なりますのみ二つのオプションがある場合は、最も簡単な解決策はあるオプションに応じて、完全にhideとshow二つの異なるドロップダウンになるかもしれません選択された。

Answer 2

jQueryで.hide（）を呼び出すと、要素にdisplay：noneが追加されます。この方法でオプションを隠すことができるのは標準HTMLだとは思えません。

あなたは、代わりにこのコードを使用することもできます。

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

オプションタグは、CSSの表示属性をサポートしていません。これはshow（）/ hide（）の動作です。あなたの最善の策は、必要に応じてオプションを削除し、再作成することです。または、あなたはそれらを別の隠しオブジェクトに追加し、完全に形成する必要があるときにそれらを戻すことができると思います。

だから、動作しません何

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