Javascript/jQueryはFirefox、Safari、IEでは動作しません。 OperaとChromeでうまくいく

Question

ちょうど2週間前にうまく動作するコードを使用しています。ここから取得し、使用する前にチェックしました。なんらかの理由で、現在はChromeとOpera、jsfiddleのオリジナルでさえも動作します。私はFirefoxのように最初にテストしたと思います。私は完全に困惑しています。

2番目のドロップダウンのオプションは、最初のドロップダウンの選択に依存するはずです。

<form id="formname" name="formname" method="post" action="submitform.asp" > 
    <table width="50%" border="0" cellspacing="0" cellpadding="5"> 
     <tr> 
      <td width="41%" align="right" valign="middle">Category1 :</td> 
      <td width="59%" align="left" valign="middle"> 
       <select name="category1" id="category1"> 
        <option value="">Select Category1</option> 
        <option value="home_ware">Home Ware</option> 
        <option value="education">Education</option> 
        <option value="books">Books</option> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td align="right" valign="middle">Category2 :</td> 
      <td align="left" valign="middle"> 
       <select disabled="disabled" id="category2" name="category2"> 
        <option value>Select Category2</option> 
        <!-- Home Ware --> 
        <option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option> 
        <option rel="home_ware" value="audio-video">Audio/Video</option> 
        <option rel="home_ware" value="beddings">Beddings</option> 
        <option rel="home_ware" value="camera">Camera</option> 
        <option rel="home_ware" value="cell-phones">Cell Phones</option> 
        <!-- Education --> 
        <option rel="Education" value="Colleges">Colleges</option> 
        <option rel="Education" value="Institutes">Institutes</option> 
        <option rel="Education" value="Schools">Schools</option> 
        <option rel="Education" value="Tuitions">Tuitions</option> 
        <option rel="Education" value="Universities">Universities</option> 
        <!-- Books --> 
        <option rel="Books" value="College Books">College Books</option> 
        <option rel="Books" value="Engineering">Engineering</option> 
        <option rel="Books" value="Magazines">Magazines</option> 
        <option rel="Books" value="Medicine">Medicine</option> 
        <option rel="Books" value="References">References</option> 
       </select> 
      </td> 
     </tr> 
    </table> 
</form> 

$(function(){ 

    var $cat = $("#category1"), 
     $subcat = $("#category2"); 

    $cat.on("change",function(){ 
     var _rel = $(this).val(); 
     $subcat.find("option").attr("style",""); 
     $subcat.val(""); 
     if(!_rel) return $subcat.prop("disabled",true); 
     $subcat.find("[rel="+_rel+"]").show(); 
     $subcat.prop("disabled",false); 
    }); 
}); 

http://jsfiddle.net/v917ycp6/5/

Answer 1

あなたのコードは、FirefoxとInternet Explorerで動作します（サファリテストされていません。）

コードが実行される前にあなたはjQueryのが含まれていることを確認してください。
また、問題を指摘しているエラーをコンソールでチェックしてください。
また、JavaScriptが.jsファイルにない場合は、<script>タグ内にある必要があります。

これが詳細を提供することが自由にできない場合は、

P.S.私はコメントのために50の評判が必要です。あなたの質問にはおそらく答えませんが、私はこれを答えとして提供します。

Answer 2

一部のブラウザでは、非表示/表示オプションが奇妙に動作することがあります。おそらく、関連するAPIが実装される方法の違いが原因です。以下は、previous answerの同じロジックを使用した例です。これはすべてのブラウザで正常に動作するはずです。

hide/showオプションの代わりに、jQuery data（）を使用して最初のselectオプションをキャッシュします。オプションの最初の変更時に、このキャッシュからオプションがフィルタリングされ、表示/非表示の代わりにオプションリスト全体が更新されて更新されます。

$(function() { 
 

 
    $("#category1").on('change', function() { 
 
    if (!$(this).data('options')) { 
 
     $(this).data('options', $('#category2 option').clone()); 
 
    } 
 
    var id = $(this).val(); 
 
    var options = $(this).data('options').filter('[rel=' + id + ']'); 
 
    if (options.length) { 
 
     $('#category2').html(options).prop('disabled', false); 
 
    } else { 
 
     $('#category2').html($('<option value>No subcategory found</option>')).prop('disabled', true); 
 
    } 
 

 
    }); 
 

 
});

#category2 option { 
 
    display: none; 
 
} 
 
#category2 option.label { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="formname" name="formname" method="post" action="submitform.asp"> 
 
    <table width="50%" border="0" cellspacing="0" cellpadding="5"> 
 
    <tr> 
 
     <td width="41%" align="right" valign="middle">Category1 :</td> 
 
     <td width="59%" align="left" valign="middle"> 
 
     <select name="category1" id="category1"> 
 
      <option value="">Select Category1</option> 
 
      <option value="home_ware">Home Ware</option> 
 
      <option value="Education">Education</option> 
 
      <option value="Books">Books</option> 
 
      <option value="Unknown">No subcategory</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right" valign="middle">Category2 :</td> 
 
     <td align="left" valign="middle"> 
 
     <select disabled="disabled" id="category2" name="category2"> 
 
      <option value>Select Category2</option> 
 
      <!-- Home Ware --> 
 
      <option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option> 
 
      <option rel="home_ware" value="audio-video">Audio/Video</option> 
 
      <option rel="home_ware" value="beddings">Beddings</option> 
 
      <option rel="home_ware" value="camera">Camera</option> 
 
      <option rel="home_ware" value="cell-phones">Cell Phones</option> 
 
      <!-- Education --> 
 
      <option rel="Education" value="Colleges">Colleges</option> 
 
      <option rel="Education" value="Institutes">Institutes</option> 
 
      <option rel="Education" value="Schools">Schools</option> 
 
      <option rel="Education" value="Tuitions">Tuitions</option> 
 
      <option rel="Education" value="Universities">Universities</option> 
 
      <!-- Books --> 
 
      <option rel="Books" value="College Books">College Books</option> 
 
      <option rel="Books" value="Engineering">Engineering</option> 
 
      <option rel="Books" value="Magazines">Magazines</option> 
 
      <option rel="Books" value="Medicine">Medicine</option> 
 
      <option rel="Books" value="References">References</option> 
 

 
     </select> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>