Question

我有以下代码（你可以在http://jsfiddle.net/5dbZx/看到）。我正在运行jQuery版本v1.6.1。出于某种原因， .show（）（我也尝试过.toggle（））在IE 8或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

Internet Explorer会将选择框视为与文档的其余部分略有不同。 IE不会注意到select元素的子节点中的事件，只注意select元素本身。

我通常根据选择值或selectedIndex属性设置我的功能。使用onchange事件。

Answer 2

您只是无法在选择选项上放置onclick事件，它不会在所有浏览器中触发。请尝试使用onchange的{{1}}事件。

select

Answer 3

请参阅以下内容：

$(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 4

试试这个小提琴：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();
    }
});

[编辑] 位简化：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);
});

Answer 5

这里也不行，镀铬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>

jQuery.show（）无法在IE 8，Safari 5.1中运行

5 个答案: