javascript - 为什么显示/隐藏 div 在 firefox 中有效，但在 google chrome 中无效？

Question

相关HTML代码如下:

<select>
    <option id="show">Traditional class</option>
    <option id="hide">Online class</option>
</select>
<div id="paypal">
    <ul class="checkbox-grid">
        <li>
            <input type="checkbox" name="text1" value="value1" style="margin-left: 10px;" />
            <label>All</label>
        </li>
        <li>
            <input type="checkbox" name="text2" value="value2" style="margin-left: 10px;" />
            <label>Mon</label>
        </li>
        <li>
            <input type="checkbox" name="text3" value="value3" style="margin-left: 10px;" />
            <label for="text3">Tue</label>
        </li>
        <li>
            <input type="checkbox" name="text4" value="value4" style="margin-left: 10px;" />
            <label for="text4">Wed</label>
        </li>
        <li>
            <input type="checkbox" name="text5" value="value5" style="margin-left: 10px;" />
            <label for="text5">Thu</label>
        </li>
        <li>
            <input type="checkbox" name="text6" value="value6" style="margin-left: 10px;" />
            <label for="text6">Fri</label>
        </li>
        <li>
            <input type="checkbox" name="text7" value="value7" style="margin-left: 10px;" />
            <label for="text7">Sat</label>
        </li>
        <li>
            <input type="checkbox" name="text8" value="value8" style="margin-left: 10px;" />
            <label for="text8">Sun</label>
        </li>
    </ul>
    <br>
    <table style="width:100%">
        <tr>
            <td>
                <select>
                    <option>hr</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>min</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>am</option>
                    <option>pm</option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>hr</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>min</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>am</option>
                    <option>pm</option>
                    <option></option>
                </select>
            </td>
        </tr>
    </table>
</div>

隐藏/显示 div(即 <div id="paypal">)的相应 jQuery 代码如下:

<script>
    $(document).ready(function() {
        $("#show").click(function() {
            // $("#paypal").removeAttr("style");
            $("#paypal").show();
        });
    }); 
    <script> 
    $(document).ready(function() {
        $("#hide").click(function() {
            //$("#paypal").attr("style","display:none");
            $("#paypal").hide();
        });
    });
</script>

上述隐藏/显示功能在 Mozilla firefox 中运行良好，但在 Google Chrome 中运行不佳。它总是显示 <div id="paypal"> .

为什么会这样？请帮助我。

谢谢。

Answer 1

因为option没有click事件所以需要用select的change事件

$(document).ready(function () {
    $("select").change(function () {
        $('#paypal').toggle(); // if you only have 2 options use toggle
    });
});

如果你有更多，你可以检查所选选项的 ID

$(document).ready(function () {
    $("select").change(function () {
        this[this.options.selectedIndex].id === 'show' ? $('#paypal').show() : $('#paypal').hide();
    });
});