Question

我正在尝试显示/隐藏div取决于select。

以下代码运行正常，但在使用默认选定值（opt3）加载页面时无效。

如何在第一次加载jquery时获得div id＃opt3 diplayed？

<body>

        <div>

        <p>

                <select name="routing-sel" id="routing">

                        <option value="opt1">opt1</option>

                        <option value="opt2">opt2</option>

                        <option value="opt3" selected>opt3</option>

                        <!-- the selected value will be dynamically generated by PHP-->

                </select>

                </p>

        </div>



        <div id="opt1" class="form" style="display:none">

                <p>opt1 selected</p>

        </div>

        <div id="opt2" class="form" style="display:none">

                <p>opt2 selected</p>

        </div>

        <div id="opt3" class="form" style="display:none">

                <p>opt3 selected</p>

        </div>



        <script src="jquery-1.11.3.min.js"></script>



        <script>

        $(document).ready(function() {

                $('select#routing').change(function() {

                        $('.form').hide();

                        $('#' + $(this).val()).show();

                });

        });

        </script>

</body>

Answer 1

你可以这样做：

  $(document).ready(function() {

            $('#' + $("#routing").val()).show(); // Show default chosen option on load

            $('select#routing').change(function() {

                    $('.form').hide();

                    $('#' + $(this).val()).show();

            });

    });

http://jsfiddle.net/sandenay/8zewxp7r/

Answer 2

只需修改您的document.ready即可。这将有效..

$（document）.ready（function（）{

    $('#' + $('select#routing').val()).show();

            $('select#routing').change(function() {

                    $('.form').hide();

                    $('#' + $(this).val()).show();

            });

    });

jquery隐藏div没有显示在加载页面上

2 个答案: