jQuery.show（）はIE 8、Safari 5.1で動作しません

Question

私は次のコードを持っています（これはhttp://jsfiddle.net/5dbZx/で見ることができます）。私はjQueryバージョンv1.6.1を実行しています。何らかの理由で、.show（）（これもIE8やSafari 5.1ではこれで動作しませんでした） - 私はWin XPと7の両方で試してみました。FireFoxで動作します3.6とIE 9.

私はいくつかの検索を行いました。実際には.showはIE 8で動作しますが、このコードでは何か他のエラーが発生している必要があります。しかし、私は何がわからない。ありがとう！

<table> 
    <tr class="form_row"> 
     <td class="required_label" id="Example1"> 
       Example 1: 
     </td> 
     <td class="input_field"> 
      <select name="course_type" id="course_type"> 
       <option value="" selected="selected"></option> 
       <option value="1" onclick="$('#Example2').show();" >choice 1</option> 
       <option value="2" onclick="$('#Example2').show();" >choice 2</option> 
       <option value="3" onclick="$('#Example2').show();" >choice 3</option> 
       <option value="4" onclick="$('#Example2').hide();" >choice 4</option> 
      </select> 
     </td> 
    </tr>  
    <tr class="form_row" id="Example2" style="display: none;"> 
     <td class="required_label"> 
      Example 2: 
     </td> 
     <td class="input_field"> 
      <select name="select_statement" id="select_statement"> 
       <option value=""></option> 
       <option value="1">Yes</option> 
       <option value="0">No</option> 
      </select> 
     </td> 
    </tr> 
</table> 

Answer 1

selectオプションにonclickイベントを配置することはできません。すべてのブラウザでトリガーされません。代わりにselectのonchangeイベントを使用してみてください。

$("#course_type").change(function(){ 
    if ($(this).val() == 4) { 
    $("#Example2").hide(); 
    } 
    else { 
    $("#Example2").show(); 
    } 
}); 

Answer 2

もここ

動作していない、クロム11 .. はこれを行う試してみてください。

<script type="text/javascript"> 
     $(function(){ 
       $('#course_type').click(function(){ 
        $('#Example2').show(); 
       }); 
     }); 
</script> 
<table> 
     <tr class="form_row"> 
       <td class="required_label" id="Example1"> 
        Example 1: 
       </td> 
       <td class="input_field"> 
        <select name="course_type" id="course_type"> 
          <option value="" selected="selected"></option> 
          <option value="1">choice 1</option> 
          <option value="2">choice 2</option> 
          <option value="3">choice 3</option> 
          <option value="4">choice 4</option> 
        </select> 

       </td> 
     </tr>  
     <tr class="form_row" id="Example2" style="display: none;"> 
       <td class="required_label"> 
        Example 2: 
       </td> 
       <td class="input_field"> 
        <select name="select_statement" id="select_statement"> 
          <option value=""></option> 
          <option value="1">Yes</option> 
          <option value="0">No</option> 
        </select> 
       </td> 
     </tr> 
</table> 

Answer 3

Internet Explorerは、ドキュメントの残りの部分よりもわずかに異なる選択ボックスを扱います。 IEはselect要素の子ノードのイベントを認識せず、select要素のみを認識します。

通常、私の関数は、select値またはselectedIndex属性&のいずれかに応じて動作するように、onchangeイベントを使用して設定します。

Answer 4

以下を参照してください。

$(document).ready(function() { 
    // use of .on() requires jQuery 1.7+ 
    // for previous versions use the following instead: 
    // $("#courseType").change(function() { 
    $("#courseType").on("change", function() { 
     var val = $(this).val(); 
     if (val === "4") { 
      $("#Example2").hide(); 
     } 
     else { 
      $("#Example2").show(); 
     } 
    }); 
}); 

これはあなたのHTMLへのアップデートが必要になります：

<table> 
    <tr class="form_row"> 
     <td class="required_label" id="Example1"> 
       Example 1: 
     </td> 
     <td class="input_field"> 
      <select name="course_type" id="course_type"> 
       <option value="" selected="selected"></option> 
       <option value="1">choice 1</option> 
       <option value="2">choice 2</option> 
       <option value="3">choice 3</option> 
       <option value="4">choice 4</option> 
      </select> 
     </td> 
    </tr>  
    <tr class="form_row" id="Example2" style="display: none;"> 
     <td class="required_label"> 
      Example 2: 
     </td> 
     <td class="input_field"> 
      <select name="select_statement" id="select_statement"> 
       <option value=""></option> 
       <option value="1">Yes</option> 
       <option value="0">No</option> 
      </select> 
     </td> 
    </tr> 
</table> 

Answer 5

このバイオリンを試してみてください：次のようにhttp://jsfiddle.net/smendola/5dbZx/1/

HTMLが変更されます。

<option value="1" data-show="show" >choice 1</option> 
<option value="2" data-show="show" >choice 2</option> 
<option value="3" data-show="show" >choice 3</option> 
<option value="4" data-show="hide" >choice 4</option> 

とJSは次のとおりです。

$('#course_type').change(function() { 
    if ($(this).find('option:selected').attr('data-show') == "show") { 
     $('#Example2').show(); 
    } else { 
     $('#Example2').hide(); 
    } 
}); 

[EDIT] ビットが簡素化：http://jsfiddle.net/smendola/5dbZx/2/

<option value="3" data-show="1" >choice 3</option> 
<option value="4" data-show="0" >choice 4</option> 

JS：

$('#course_type').change(function() { 
    var show = $(this).find('option:selected').attr('data-show'); 
    $('#Example2').toggle(show); 
});