JavascriptがFFで動作しますが、ないIEやChrome（単純な関数）

Question

にそれだけで表示され、ユーザーがドロップダウンメニューから選択した内容に応じて、異なるのdivのを隠しかなり単純な機能です。なぜIEやChromeで動作しないのですが、FFで動作するのでしょうか？どこでも検索して、任意の答えを見つけることができません:(

<script language="javascript" type="text/javascript"> 
    function show(field) { 
     var val = field.value; 
     if (val == "imaging") 
     { 
      document.getElementById("imagingDiv").style.display = "block"; 
      document.getElementById("inventoryDiv").style.display = "none"; 
      document.getElementById("chargebackDiv").style.display = "none"; 
      document.getElementById("studentJobAccountDiv").style.display = "none"; 
     } 
     else if (val == "inventory") 
     { 
      document.getElementById("imagingDiv").style.display = "none"; 
      document.getElementById("inventoryDiv").style.display = "block"; 
      document.getElementById("chargebackDiv").style.display = "none"; 
      document.getElementById("studentJobAccountDiv").style.display = "none"; 
     } 
     else if (val == "chargeback") 
     { 
      document.getElementById("imagingDiv").style.display = "none"; 
      document.getElementById("inventoryDiv").style.display = "none"; 
      document.getElementById("chargebackDiv").style.display = "block"; 
      document.getElementById("studentJobAccountDiv").style.display = "none"; 
     } 
     else if (val == "studentJobAccount") 
     { 
      document.getElementById("imagingDiv").style.display = "none"; 
      document.getElementById("inventoryDiv").style.display = "none"; 
      document.getElementById("chargebackDiv").style.display = "none"; 
      document.getElementById("studentJobAccountDiv").style.display = "block"; 
     } 
     else 
     { 
      document.getElementById("imagingDiv").style.display = "none"; 
      document.getElementById("inventoryDiv").style.display = "none"; 
      document.getElementById("chargebackDiv").style.display = "none"; 
      document.getElementById("studentJobAccountDiv").style.display = "none"; 
     } 
    } 
    </script> 

編集：私はのようなドロップダウンメニューで関数を呼び出す：

<select id="reportsSelect"> 
         <option value="blank" id="blank" onclick="show(this)"></option> 
         <option value="imaging" id="imaging" onclick="show(this)">Imaging Request</option> 
         <option value="inventory" id="inventory" onclick="show(this)">Inventory</option> 
         <option value="chargeback" id="chargeback" onclick="show(this)">Chargeback</option> 
         <option value="studentJobAccount" id="studentJobAccount" onclick="show(this)">Student Job Account</option> 
        </select> 

誰かが示唆したように私はjQueryのを使用してみたいです

また、問題を明確にするために、FireFoxでユーザーが希望するオプションを選択すると、それが表示されます適切なdivを表示機能を介して。IEでは、彼らはオプションのいずれかを選択すると、それはない何も表示しない。

Answer 1

<option>要素は、実際に文書のファーストクラスのメンバーではありません。 IEを含む多くのブラウザでは、OS/windowing-toolkitの標準ウィジェットを使用して選択ボックスが実装され、HTMLレンダリングされたブロックでは実装されないため、<option>には実際のアフォーダンスがありません。特に、スタイルやスクリプトを作成する能力は限られています。

Option要素は、イベント処理に参加することを保証するものではありません。彼らはclickイベントを生成することはできません（とにかく、クリックや他の手段によるアクティベーションを区別するべきではありません）。代わりに、<select>自体のchangeイベントを使用して、選択ボックスの状態を監視する必要があります。

<select id="reportsSelect"> 
    <option value="blank"></option> 
    <option value="imaging">Imaging Request</option> 
    <option value="inventory">Inventory</option> 
    <option value="chargeback">Chargeback</option> 
    <option value="studentJobAccount">Student Job Account</option> 
</select> 

<script type="text/javascript"> 
    document.getElementById('reportsSelect').onchange= function() { 
     for (var i= 1; i<this.options.length; i++) { // 1 not 0 - skip the blank option 
      var option= this.options[i]; 
      var div= document.getElementById(option.value+'Div'); 
      div.style.display= option.selected? 'block' : 'none'; 
     } 
    }; 
</script> 

Answer 2

jQueryでこれを実現したい場合は、ここにa simple pluginがあります。